CSS selector "Go"

Recently in the study of jquery selector, you know that jquery selectors and CSS selectors are very similar, so tidy up the CSS selector;

CSS1-CSS3 offers a very rich selection of selectors, but because some selectors are not supported by individual browsers, many selectors are rarely used in real-world CSS development.

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, in which a colleague satisfies 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

select Select		example
e:enabled	matches the element activated in the form	input[type=" text "]:d isabled { Background: #ddd;}
e:disabled	match form Elements that are disabled in
e:checked
e::selection

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

CSS Selector browser support scenarios, including the latest CSS3 and Safari 4.0 beta support. Thanks to Estelle Weyl's summary. Note: Green/√ is currently supported. The orange/δ indicates that the browser section supports the current CSS selector. The red/χ indicates that the browser is not supported at all.

CSS Selector browser support scenarios , including the latest CSS3 and Safari 4.0 beta support. Thanks to Estelle Weyl's summary.

CSS selector "Go"