Before we get started

CSS selectors are very important when writing front-end styles. Ruan yifeng teacher’s article is very comprehensive introduction of a variety of selectors, in order to facilitate their own use, this article excerpted part of the most common part in the development process, and through reading the article to supplement the weight of the selector related content.

Common selector

Basic selector

The serial number The selector meaning
1. * Universal element selector that matches any element
2. E Tag selector that matches all elements that use the E tag
3. .info Class selector that matches all elements containing info in the class attribute
4. #footer Id selector that matches all elements whose ID attribute is equal to footer

2. Combinatorial selector of multiple elements

The serial number The selector meaning
5. E,F Multi-element selector that matches all E elements or F elements at the same time, separated by commas
6. E F Descendant element selector that matches all F elements belonging to the descendant of E element, separated by a space between E and F
7. E > F Child element selector that matches F of all E elements
8. E + F The adjacent element selector matches all sibling elements F following E

Pseudo-classes in CSS 2.1

The serial number The selector meaning
9. E:first-child Matches the first child of the parent element
10. E:link Matches all unclicked links
11. E:visited Matches all links that have been clicked
12. E:active Matches E elements that have not been released while the mouse has been pressed over them
13. E:hover Matches the E element over which the mouse hover
14. E:focus Matches the E element that gets the current focus
15. E:lang(c) Matches E elements whose lang attribute is equal to C

Structural pseudo-classes in CSS 3

The serial number The selector meaning
16. E:root Matches the root element of the document, or in the case of an HTML document, the HTML element
17. E:nth-child(n) Matches the NTH child of its parent element, with the first numbered 1
18. E:nth-last-child(n) Matches the penultimate NTH child of its parent element, with the first numbered 1
19. E:nth-of-type(n) Like :nth-child(), but only matches elements that use the same tag
20. E:nth-last-of-type(n) Like: nth-last-Child (), but only matches elements that use the same tag
21. E:last-child Matches the last child of the parent element, equivalent to :nth-last-child(1)
22. E:first-of-type Matches the first child of the same tag under the parent element, equivalent to :nth-of-type(1)
23. E:last-of-type Matches the last child of the parent element using the same tag, equivalent to :nth-last-of-type(1)

Selector weight

  1. Inline style, such as: style = “…” , the weight of1000.
  2. The ID selector, for example: #content, the weight is0100.
  3. Class, pseudo class, property selector, for example. Content, the weight is0010.
  4. Type selector, pseudo-element selector, such as div p, the weight is0001.
  5. Wildcard, child selector, adjacent selectorAnd so on. Such as* > +, the weight of0000.
  6. Inherited styles have no weights


Source: CSS selector Notes

Source: weights of selectors in the CSS