Detailed introduction to various css selectors

1. Basic selector

1. * Universal element selector, matching any element

2. E tag Selector, matches all elements using the E tag

3. .info class selector, matches all elements containing info in the class attribute

4. #footer id selector, Match all elements whose id attribute is equal to footer

2. Multi-element combination selector

5. E,F Multiple elements Selector, matching all E elements or F elements at the same time, separated by commas between E and F

6. E F Descendant element selector, matching all descendants of the E element F element, separated by a space between E and F

7. E > F child element selector, matches all child elements of the E element F

8. E + F Adjacent element selector, matches all sibling elements immediately following the E element F

3. CSS 2.1 Attribute Selector

9. E[att] Matches all E elements with the att attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". The same as below.)

10. E[att=val] Matches all att attributes equal to "val" E element

11. E[att~=val] Match all E elements whose att attribute has multiple space-separated values, one of which is equal to "val"

12. E[att|=val] Matches all E elements whose att attribute has multiple hyphen-separated values, one of which starts with "val", mainly used for lang Attributes, such as "en", "en-us", "en-gb", etc.

4. Pseudo-classes in CSS 2.1

13. E:first-child Match the first child element of the parent element

14. E:link Match all links that have not been clicked

15. E:visited Match all clicked links

16. E:active Match the links where the mouse has been pressed but has not been releasedE element

17. E:hover Match the E element that the mouse is hovering over

18. E:focus Match the ## that has the current focus #E element

19. E:lang(c)

Match the E element whose lang attribute is equal to c

Five, Pseudo-elements in CSS 2.1

20. E:first-line

Match the first line of E element

21. E:first-letter

Match The first letter of the E element

22. E:before

Insert the generated content before the E element

23. E:after

in Insert the generated content after the E element

6. Universal selector for sibling elements in CSS 3

24. E ~ F

Match any sibling F element after the E element

7. CSS 3 attribute selector

25. E[att^="val"]

AttributeThe element whose value starts with "val"

26. E[att$="val"]

Attribute Elements whose value of att ends with "val"

27. E[att*="val"]

AttributeElements whose value of att contains the string "val"

8. Pseudo-classes related to user interface in CSS 3

28. E:enabled

Match activated elements in the form

29. E:disabled

Match disabled elements in the form

30. E:checked

Match the selected radio (radio button) in the form Or checkbox element

31. E::selection

Matches the element currently selected by the user

9. Structural pseudo-classes in CSS 3

32. E:root Matches the root element of the document. For HTML documents, it is the HTML element

33. E:nth-child(n) Match the nth child element of its parent element, the first number is 1

34. E:nth-last -child(n) Match the nth child element from the bottom of its parent element, the first number is 1

35. E:nth-of-type(n) And :nth-child() has a similar effect, but only matches elements using the same tag

36. E:nth-last-of-type(n) and :nth -last-child() works similarly, but only matches elements using the same tag

37. E:last-child matches the last child element of the parent element, which is equivalent to :nth -last-child(1)

38. E:first-of-type Matches the first child element using the same tag under the parent element, which is equivalent to :nth-of- type(1)

39. E:last-of-type Matches the last child element using the same tag under the parent element, which is equivalent to :nth-last-of-type( 1)

40. E:only-child Matches the only child element under the parent element, which is equivalent to :first-child:last-child or:nth-child(1) :nth-last-child(1)

41. E:only-of-type Matches the only child element using the same tag under the parent element, which is equivalent to :first-of -type:last-of-type or:nth-of-type(1):nth-last-of-type(1)

42. E:empty Matches an element that does not contain any child elements element, note that text nodes are also regarded as child elements

10. CSS 3 anti-selection pseudo-class

43. E:not(s) Match any element that does not match the current selector

11. The :target pseudo-class in CSS 3

44. E:target Matches the effect of clicking on a specific "id" in the document

The above is the detailed content of Detailed introduction to various css selectors. For more information, please follow other related articles on the PHP Chinese website!