CSS selectors

The selector

Basic meaning: Selects a group of elements in the element tree based on some characteristics.

Structure classification (from simple to complex)

  1. Simple selector: Determines whether elements are selected for a feature
  2. Compound selectors: Simple selectors written consecutively together that select individual elements for their own characteristics.
  3. By complex selector: “(space)”, “>”, “-“, “+” “| |” compound selector, symbolic link according to the parent element or sequence elements inspection before a single element.
  4. List of selectors: Complex selectors separated by commas that represent “or” relationships.

Simple selector

Common simple selectors

Type selectors and ensemble selectors

** Type selector: ** Selects an element based on its label name. All selector: “*”, can select any element

Type selector with namespace

Example: Distinguish between selecting a in SVG and A in HTML

@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml);
svg|a {
stroke: blue;
stroke-width: 1;
}

html|a {
font-size: 40px;
}
Copy the code

Id and class selectors

The id selector is “#” followed by the ID name and the class selector is “.” followed by the class name, which recognizes the class syntax separated by Spaces

Basic usage
#myid {
stroke: blue;
stroke-width: 1;
}

.mycls {
font-size: 40px;
}
Copy the code

Property selector

Select an HTML element based on its attributes.

Four kinds of form
  1. The [att] element is selected if it has this attribute
  2. [att=val] Exact match, whether the element’s attribute value is val
  3. [att~=val] Multiple matches, whether the value of an element is one of several values
  4. [att | = val] match in the beginning, the value of the element is begin with val
For attributes that contain special characters

Use val to enclose it in quotes, or use a backslash escape

Pseudo class selector

A series of CSS specified selectors, starting with:, that can be classified as normal or functional.

Tree structure relation pseudo-class
  • :rootTree root element
  • :emptyAn exception to elements with no child nodes is when the child node is a blank text node
  • :nth-childand:nth-last-childDenotes the number of children from front to back and the number of children from back to front. The usage is as follows:

  • :first-childand:last-childRepresents the first and last elements
  • :only-childIndicates that a single child element is selected
  • :nth-of-typeSaid once upon a time in the future several n a specified type of element, the deformation of this kind of writing is a syntactic sugar, such as: S NTH – of – type (An a + b) is: the NTH – child | (An)
  • Other:nth-last-of-type.first-of-type.last-of-type.only-of-type
Link and behavior pseudo-class selectors
  • :any-linkRepresents any link
  • :linkElements that have not been accessed
  • :visitedLinks that have already been visited
  • :hoverHover over the element
  • :visitedThe user is activating this element
  • :focusThe focus falls on this element
  • :targetTo access the element indicated by the hash section of the selected browser URL

In the Selector Level 4 draft, target-within and focus-within pseudo-classes are also introduced to represent the parent container of target or focus.

Logical pseudo-class selector
  • :notSelect elements that are not hit by internal simple selectors. Only simple selectors are supported at this stage. Usage:
*|*: not(: hover);
Copy the code

In the Selector Level 4 draft, logical pseudo-classes such as :is,: WHERE, and :has were also introduced.

Other pseudo-class selectors
  • Internationalization: for handling internationalization and multilingual issues + dir + lang
  • Audio/Video: distinguish between audio playing state + Play + pause
  • Timing: Pseudo-class + current + past + Future used for timing clients such as screen readers
  • Table: pseudo-class for processing table columns + nTH-col + NTH-last-col
Suggestions for using pseudo-classes

Try to identify elements with appropriate IDS and classes, preferably only when you have to use pseudo-classes