Various selectors for CSS

First, the basic selector

1. * Universal Element Selector, matches any element

2. E tag Selector, matching all elements using e tag

3.. info class selector that matches all elements of the class attribute that contain info

4. #footer the ID selector to match all elements of the id attribute equal to footer

Two, multi-element combination Selector

5. E,f Multi-element selector, matching all e elements or F elements, separated by commas between E and F

6. E F descendant element selector, matching all f elements belonging to the descendants of e elements, separated by spaces between E and F

7. E > F sub-element selector, matching all elements of e element F

8. E + F adjoins the element selector, matching all sibling elements immediately following the E element f

Third, CSS 2.1 Property Selector

9. 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. ）

E[att=val] matches the E element of all att attributes equal to "Val"

E[att~=val] matches all att attributes with multiple space-delimited values, one of which equals the "Val" E element

E[att|=val] matches all att attributes with multiple hyphen-delimited (hyphen-separated) values, one of the E elements with a value beginning with "Val", primarily for the lang attribute, such as "en", en-US, " EN-GB "Wait.

Four, Pseudo-classes in CSS 2.1

E:first-child matches the first child element of a parent element

E:link matches all the links that have not been clicked

e:visited matches all clicked links

E:active matches the E element on which the mouse has been pressed and has not been 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) matches the E element with the lang attribute equal to C

Five, Pseudo-Elements in CSS 2.1

E:first-line matches The first line of the E element

E:first-letter matches The first letter of the E element

E:before. Insert the generated content before the E element

E:after Insert the generated content after the E element

Six, Common selector for sibling elements of CSS 3

The E ~ F matches any of the sibling F elements after the E element

Seven, CSS 3 Property Selector

E[att^= "Val" property the value of the att is the element that begins with "Val"

E[att$= "Val" property the value of the ATT has an element that ends with "Val"

E[att*= "Val"] property The ATT value contains the elements of the "Val" string

Eight, User interface-related pseudo-classes in CSS 3

e:enabled. match elements that are active in a form

e:disabled. match the disabled elements in the form

E:checked matches the selected radio (radio box) or checkbox (check box) element in the form

E::selection matches the element currently selected by the user

Nine, Structural pseudo-classes in CSS 3

E:root matches the root element of the document , which is the HTML element for the HTML document.

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 , with the first number 1

E:nth-of-type (n) works similarly to: Nth-child (), but only matches elements that use the same label

E:nth-last-of-type (n) works similarly to: Nth-last-child (), but only matches elements that use the same label

Panax Notoginseng. E:last-child matches the last child element of the parent element, equivalent to : Nth-last-child (1)

E:first-of-type matches the first child element that uses the same label under the parent element, equivalent to : Nth-of-type (1)

E:last-of-type matches 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 of the child elements under the parent element, equivalent to : First-child:last-child or: Nth-child (1): Nth-last-child (1)

E:only-of-type matches 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

10. Anti-selection pseudo-class for CSS 3

E:not (s) matches any element that does not conform to the current selector

11. CSS 3: Target Pseudo-class

E:target matches the effect of a specific "id" click in a document

Various selectors for CSS