CSS Selector Summary

CSS code consists of a number of rules, selector + declaration block.

1. Element Selector

Tag name {declaration block},eg:p{font-size:18px;}

All elements that match the tag name will be applied to the rules in the declaration block.

2. Class Selector

. class name {declaration block}

The rules in the declaration block are applied to all the class attributes that are elements of the specified name.

Note: (1), the class name must start with a letter, followed by numbers, letters, hyphens, underscores.

(2), case-sensitive

(3), a class selector can be applied to more than one label.

3. ID Selector

#ID值 {Declaration block}

The attribute ID is the element with the specified value, the rule that declares the block is applied, the ID value is unique, and only one element is selected.

If the class and ID are applied to the same element at the same time, the ID takes effect.

4. Combination Selector

Multiple labels apply the same rule at the same time. eg:h1,h2,h3{color:red;}

5. Pseudo-Class Selector

Element name: Pseudo-class name

Eg:a:link a:visited a:hover a:active

Element name: Nth-child (x)/element name: Nth-of-type (x): the first few elements apply the rule

6. Descendant Selector

Parent element + Space + child element {declaration block}, works for all descendants

7. Subset Selector

Parent element + ">" + child element {declaration block}, only child-level function

8. Attribute Selector

element [attribute name + attribute value]{declaration block}

Eg:input[type= "text"]{color:red;}

9. Pseudo Element Selector

Element name: before/after {declaration block}, applying the claim block rule before/after the element name

Element name: first-line/first-letter {declaration block}: Sets the style of the first letter or the first line

10. Sibling Selector

Brother Element 1+ Brother element 2 {declaration block}: Select 1 after 2 apply the claim block rule.

CSS Selector Summary