CSS selector and priority

Time:2020-9-22

Selector classification

id selector

<div id="wrap"></div>
#wrap{ background: black; }

Class selector

<div class="wrap"></div>
.wrap{ background: black; }

tag chooser

div{
    margin:0;
}

attribute selectors

<input type="text">
[type=text] {
    background: black;
}

Pseudo class selector

  1. Pseudo classes of element a: link, visited, active, hover.
  2. other
    (1) Li: first child {}
    (2) Li: last child {}
    (3) Li: nth child {}
    (4) Li: not () {} (the () Li is not modified, and the above selectors can be filled in brackets)
<ul>
    <li></li>
    <li></li>
    <li><a href=""></a></li>
</ul>
li:first-child {
    border:1px solid black;
}
li:last-child {
    border:1px solid red;
}
li:nth-child(2){
    border:1px solid yellow;
}

Pseudo element selector

p::first-line {
  color: blue;
  text-transform: uppercase;
}

Group Selectors
Separated by (comma to separate module name to be decorated)

<div class="qun">
    <p><span></span></p>
    <p></p>
</div>

.qun,span {
    margin:0;
}

Global selector
Start with * (asterisk before curly braces modifies all tags that contain the body)

* {
    margin:0;
}

Nearest sibling selector
Elements separated by + are adjacent to each other, that is, the second node is next to the first node and has a common parent node.

<div class="qun">
    <p class="first">
        <span>First</span>
    </p>
    <p>Second < / P > / * modification*/
    <p>Third</p>
</div>

.first+p{
    margin:0;
}

General brother selector
The sibling elements are separated by ~ and the second node is anywhere after the first node, and the parents of the two nodes are the same.

<div class="qun">
    <p class="first">
        <span>First</span>
    </p>
    <p>Second < / P > / * modification*/
    <p>Third < / P > / * modification*/
</div>

.first~p{
    margin:0;
}

Child Selector
The parent-child elements are separated by > and the child selector only selects the direct descendant of the element, that is, it only acts on the first descendant.

<div class="qun">
    <p class="first">
        <span>First</span>
    </p>
    <p>Second</p>
    <p>Third</p>
    <span>Fourth < / span > / * modification*/
</div>

.qun > span {
    color:black;
}

Descendant Selectors
Space the elements that contain the relationship, and select all descendants of the element

<div class="qun">
    <p class="first">
        <span>First < / span > / * modification*/
    </p>
    <p>Second</p>
    <p>Third</p>
    <span>Fourth < / span > / * modification*/
</div>

.qun span {
    color:black;
}

The difference between pseudo elements and pseudo classes

Understanding: pseudo class: eunuch; pseudo element: Emperor.

Fundamental difference

The fundamental difference between pseudo element and pseudo class is whether the object element of operation exists in the original DOM structure.

Pseudo class: the operands of the pseudo class are originalElements existing in DOM structure。 Pseudo class indicates that an existing element is in a certain state, but this state cannot be represented by DOM treeAdd styles to it through pseudo classes
Pseudo element: creates an object. The operation object of pseudo element is the newly generated DOM element. This object will not occupy the DOM node, will not appear in the DOM, will not change the content of the document, and can not be copied. It is only added in the CSS render layer.

//Pseudo class
<style>
  li:nth-child(2n+1) {
    color: #00a2d4;
  }
</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
//Pseudo element
<style>
  p::first-letter {
    color: red;
  }
</style>
<p>One two three four</p>
//Equivalent to
<p>< span class = "first letter" > one < / span > two three four</p>
number

A CSS selector (Dynasty) can only have one pseudo element, but can have more than one pseudo class
Pseudo classes can be spliced multiple times. Pseudo elements cannot be spliced.

<style>
    input:out-of-range:focus {
      background: #00a2d4;
    }
    input:out-of-range + h2::after {
      Content: "out of range"
    }
</style>
<body>
<input type="number" min="1" max="10">
<h2>Results: 1</h2>
</body>
position

Pseudo elements are behind and pseudo classes are in front.

<style>
    input {
      display: block;
    }
    input::after {
      Content: "checked";
      display: none;
      width: 50px;
      height: 50px;
      margin-left: 12px;
    }
    input:checked::after {
      display: block;
    }
</style>

<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
Usage scenarios

Pseudo class
Status class::link,:visited,:hover,:active,:focus
Structure class:first-child,:last-child,:nth-child,:nth-of-type
Form class::checked,:disabled,:valid,:required
Language class::dir,:lang
Pseudo element
::before,::after
::first-letter,::first-line
::selection
::selection
::placeholder
::backdrop

grammar number position Class and element Usage scenarios
Pseudo class : Multiple Front and rear modification many
Pseudo element :: One rear create object less

Calculation rules of priority

! important > inline > ID selector > class selector > label selector.

Priority is determined byABCDThe calculation rules of their values are as follows:

  1. If there are inline styles, thenA = 1OtherwiseA = 0;
  2. BThe value of is equal toID Selector Frequency of occurrence;
  3. CThe value of is equal toClass selector andattribute selectors andPseudo classThe total number of occurrences;
  4. DThe value of is equal totag chooser andPseudo elementThe total number of occurrences.

example:

#nav-global > ul > li > a.nav-link

Apply the above algorithm, find out in turnA B C DValue of:

  1. Because there is no inline style, soA = 0;
  2. ID selector appears once in total,B = 1;
  3. Class selector appears once, property selector 0 times, pseudo class selector 0 timesC = (1 + 0 + 0) = 1
  4. The tag selector appears 3 times and the pseudo element appears 0 times, soD = (3 + 0) = 3;

It’s calculated from aboveABCDIt can be abbreviated as:(0, 1, 1, 3)
The comparison rule is: compare from left to right in turn, the larger one wins, if equal, continue to move one bit to the right for comparison. If all four bits are equal, the following will override the previous

Reference articles: https://www.cnblogs.com/yugege/p/9918232.html