CSS, CSS2, and CSS3 selector summary (all selector categories and their precedence)

Selector Type list:

1. Base selector

Selector Selector	Meaning	Example
*	Universal element selector to match any element	* {margin:0; padding:0;}
E	Tag selector that matches all elements that use the e tag	p {font-size:2em;}
. info and E.info	Class selector that matches all elements of the class attribute that contain info	. info {background: #ff0;} P.info {background: #ff0;}
#info和E #info	ID selector that matches all elements of the id attribute equal to footer	#info {background: #ff0;} P#info {background: #ff0;}

2. Combo Selector

Selector Selector	Meaning	Example
E,f	A multi-element selector that matches all E or F elements, separated by commas between E and F	div,p {color: #f00;}
E F	A descendant element selector that matches all f elements that are descendants of the e element, separated by a space between E and F	#nav li {display:inline;} Li a {font-weight:bold;}
E > F	child element Selector, matching all e element's child elements F	div > Strong {color: #f00;}
E + F	Adjacent element selector, matching all sibling elements immediately following the E element f	p + P {color: #f00;}

3.CSS 2.1 Property Selector

Selector Selector	Meaning	Example
E[att]	Matches all e elements that have the ATT attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". to the same. ）	P[title] {color: #f00;}
E[att=val]	Matches the e element of all ATT attributes equal to "Val"	Div[class= "Error" {color: #f00;}
E[att~=val]	Match all ATT properties with multiple space-delimited values, where one value equals "Val" of the E element	td[class~= "name"] {color: #f00;}
E[att|=val]	Matches all ATT attributes with multiple hyphen-delimited (hyphen-separated) values, an E element whose value begins with "Val", primarily for the lang attribute, such as "en", "en-us", "EN-GB", and so on	P[lang|=en] {color: #f00;}

Note: CSS 2.1 Another feature of the property selector is the use of multiple selectors, while satisfying these multiple selectors:Blockquote[class=quote][cite] {color: #f00;}

pseudo-Class in 4.CSS 2.1

Selector Selector	Meaning	Example
E:first-child	Matches the first child element of a parent element	p:first-child {font-style:italic;} Input[type=text]:focus {color: #000; background: #ffe;} input[type=text]:focus:hover {background: #fff;} Q:lang (SV) {quotes: "\201d" "\201d" "\2019″" \2019″;}
E:link	Match all the links that have not been clicked
e:visited	Match all clicked Links
E:active	Matches the E element on which the mouse has been pressed and not released
E:hover	Match the E element on which the mouse hovers
E:focus	Matches the E element that obtains the current focus
E:lang (c)	The e element that matches the lang attribute equals C

pseudo-elements in 5.CSS 2.1

Selector Selector	Meaning	Example
E:first-line	Match the first line of the E element	p:first-line {font-weight:bold; color; #600;} . preamble:first-letter {font-size:1.5em; font-weight:bold;} . cbb:before {content: ""; Display:block; height:17px; width:18px; Background:url (top.png) no-repeat 0 0; margin:0 0 0-18px; } A:link:after {content: "(" attr (HREF) ")";}
E:first-letter	Matches the first letter of an E element
E:before	Insert the generated content before the E element
E:after	Insert the generated content after the E element

common selector for sibling elements of 6.CSS 3

Selector Selector	Meaning	Example
E ~ F	Matches any of the sibling F elements after the E element	P ~ ul {background: #ff0;}

7. CSS 3 Property Selector

Selector Selector	Meaning	Example
E[att^= "Val"]	An element with the value of a property att that begins with "Val"	Div[id^= "Nav"] {background: #ff0;}
E[att$= "Val"]	An element with the value of a property att ending with "Val"
E[att*= "Val"]	The value of the attribute att contains the element of the "Val" string

8. The pseudo-class in CSS 3 that is related to the user interface

Selector Selector	Meaning	Example
E:enabled	Match elements that are activated in the form	Input[type= "text"]:d isabled {background: #ddd;}
E:disabled	Match disabled elements in a form
E:checked	Match selected radio (radio box) or checkbox (check box) elements in a form
E::selection	Matches the element currently selected by the user

9. Structural pseudo-class in CSS 3

Selector Selector	Meaning	Example
E:root	Matches the root element of the document, which is the HTML element for the HTML document	P:nth-child (3) {color: #f00;} P:nth-child (odd) {color: #f00;} P:nth-child (even) {color: #f00;} P:nth-child (3n+0) {color: #f00;} P:nth-child (3n) {color: #f00;} Tr:nth-child (2n+11) {background: #ff0;} Tr:nth-last-child (2) {background: #ff0;} P:last-child {background: #ff0;} P:only-child {background: #ff0;} P:empty {background: #ff0;}
E:nth-child (N)	Matches the nth child element of its parent element, the first number is 1
E:nth-last-child (N)	Matches the reciprocal nth child element of its parent element, the first number is 1
E:nth-of-type (N)	Similar to: Nth-child (), but only matches elements that use the same label
E:nth-last-of-type (N)	Similar to: Nth-last-child (), but only matches elements that use the same label
E:last-child	Matches the last child element of the parent element, equivalent to: Nth-last-child (1)
E:first-of-type	Match the first child element of the same label under the parent element, equivalent to: Nth-of-type (1)
E:last-of-type	Match the last child element of the same label under the parent element, equivalent to: Nth-last-of-type (1)
E:only-child	Matches only one child element under a parent element, equivalent to: First-child:last-child or: Nth-child (1): Nth-last-child (1)
E:only-of-type	Match the only child element that uses the same label under the parent element, equivalent to: First-of-type:last-of-type or: Nth-of-type (1): Nth-last-of-type (1)
E:empty	Match an element that does not contain any child elements, note that the text node is also considered a child element

anti-selection pseudo-class for 10.CSS 3

Selector Selector	Meaning	Example
E:not (s)	Matches any element that does not conform to the current selector	: Not (p) {border:1px solid #ccc;}

CSS 3: Target Pseudo-class

Selector Selector	Meaning
E:target	Matches the effect of a specific "id" click in a Document

Selector Priority ordering:

With regard to the prioritization of selectors, Steve Souders, Google's senior web development engineer, has made a sort of high-to-low efficiency for CSS selectors (efficiency sequencing, and weight is not the same thing):

1.id Selector (#myid)

2. Class selector (. myclassname)

3. Tag Selector (div,h1,p)

4. Adjacent selector (h1+p)

5. Sub-selector (UL < LI)

6. Descendant selector (Li a)

7. Wildcard selector (*)

8. Property selector (a[rel= "external"])

9. Pseudo-Class selector (A:hover,li:nth-child)

The ID selector in the above nine selectors is the most efficient, while the efficiency of the pseudo-class selector is the lowest

Calculates the priority of the specified selector: re-recognize the weight of the CSS (weight ordering, and efficiency is not the same)

1. The weighted value of the wildcard selector 0,0,0,0
2. The weight value of the label is 0,0,0,1
3. The weight value of the class is 0,0,1,0
4. The weight value of the attribute selection is 0,0,1,0
5. The value of pseudo-class selection is 0,0,1,0
6. The weight value of the pseudo-object selection is 0,0,0,1
The weight value of 7.ID is 0,1,0,0
The weight of the 8.important is the highest 1,0,0,0

Inductive to!important > Inline > ID > Class > Pseudo Class | Attribute selection > Labeling | Pseudo-objects > Wildcards > Inheritance

CSS, CSS2, and CSS3 selector summary (all selector categories and their precedence)