To use CSS for one-to-one, one-to-many, or many-to-one control of HTML page elements, you need CSS selectors. Elements in HTML pages are controlled by CSS selectors.

CSS selector classification

1. Id selector (#id)

Before using the ID selector, you need to add id names to the elements in the HTML document, preceded by #, such as (#id). Note that the ID selector can only be used once per page.

2. Class selector (.className)

Class selectors are styled in a way that is independent of the document element. Before using class selectors, you define the class name on the HTML element.

3. Element selector is also called label selector

Is the most common and basic of CSS selectors. Element selectors are elements in a document, such as div, P, and so on.

4. Wildcard selector (*)

Wildcard selectors are used to select all elements, as well as all elements under an element

5. Property selector

Start with “[]” to wrap the attribute

-[attribute] Selects the element with the specified attribute

-[attribute=value] Selects elements with specified attributes and values

-[attribute~=value] Selects the element whose attribute value contains the specified term

– [attribute | = value] is used to select elements with a specified value at the beginning of the value of an attribute, the value must be the whole word

-[attribute^=value] Matches each element whose attribute value starts with the specified value

-[attribute$=value] Matches each element whose attribute value ends with the specified value

-[attribute*=value] Matches each element in the attribute value that contains the specified value

6. Group selector (A, B)

Indicates that both A and B are selected

7. Descendant selector, also known as inclusion selector (A B)

B is descendant of A

8. Child selector (A>B)

B is the immediate child of A

9. Adjacent sibling selector (A+B)

Selects the next adjacent element of A

10. Derivation of adjacent sibling selectors (A~B)

Represents the N adjacent elements after A is selected

11. Pseudo-class selectors

Used to select elements in a particular state

  • :first-child: matches the first element under the element
  • :last-child: the last element under the matching element
  • :nth-child() : the NTH element under the matching element, (2n+1) representing the cardinal number, (2n) representing the even number

  • :first-of-type: matches the first of each label type under the element
  • :last-of-type: matches the last of each label type under the element
  • :nth-of-type(n) : matches the NTH label of each label type under the element

  • :link: the link is not accessed
  • : Visited: We have visited the website
  • :hover: mouse placement on the link
  • :active: indicates the active state

: Hover >: Active Love hate (LVha)

  • :focus: Selects the active form element

  • : Checked: selects the checked form element
  • :disabled: Selects the disabled form elements
  • :root: Select the root node
  • :target: The target element that locates the current active page anchor
  • :not(xx) : Select elements that are not xx

12. Pseudo-element selectors

Can be used to locate text contained in a document, distinguishing it from pseudo-classes, where pseudo-elements are defined with double colons (::)

  • ::before, ::after: uses the content property to generate additional content and insert it into the tag
  • ::first-line: matches the first line of text
  • ::first-letter: matches the first letter of the text
  • :: Selection: matches highlighted text

Weight calculation rules

  • First class: represents the inline style, such as: style= “”, weight is 1000.

  • Second class: represents an ID selector, such as #content, with a weight of 0100.

  • Third class: represents classes, pseudo-classes, and attribute selectors, such as.content, with a weight of 0010.

  • Fourth class: represents type selectors and pseudo-element selectors, such as div P, with a weight of 0001.

  • Wildcard, child selector, adjacent selector, etc. For example, *, >, +, the weight is 0000.

  • Inherited styles have no weights.