1. Property list

selector Introduction to the
E:first-child Matches the first child of the parent element
E:last-child Matches the last E element in the parent element
E:nth-child(n) Matches the NTH child E of the parent element
E:first-of-type Specifies the first of type E
E:last-of-type Specifies the last of type E
E:nth-of-type(n) Specifies the NTH of type E

Class selector, property selector, pseudo-class selector, weight 10

2. Code demonstration

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}
Copy the code

3. nth-childParameters,

3.1. The NTH – child explanation

  • Note: You are essentially selecting the number of child elements

  • N can be a number, keyword, or formula

  • N If the value is a number, select the number

  • Common keywords are even, odd, odd

  • The common formula is as follows (starting from 0 if n is a formula)

  • But the 0th element or the number of elements beyond that is ignored

The formula The values
2n An even number
2n+1 An odd number
5n 5, 10, 15…
n+5 Start with the fifth (including the fifth) to the end
-n+5 The first 5 (including the fifth)

3.2. Code demonstration

<style> /* even */ ul li:nth-child(even) {background-color: aquamarine; } /* odd */ ul li:nth-child(odd) {background-color: blueviolet; } /* nth-child(n) {background-color: lightcoral; } /* even */ ul li:nth-child(2n) {background-color: lightSkyblue; } /* odd */ ul li:nth-child(2n + 1) {background-color: lightsalmon; } /* nth-child(5n) {background-color: orangered; } /* nth-child(n + 5) {background-color: Peru; } /* nth-child(-n + 5) {background-color: tan; } </style>Copy the code

4.nth-child 和 nt-of-typeThe difference between

  • The first one and the last one, I don’t need parentheses
  • If you start with NTH you put parentheses, you can write the formula
  • Select type is used most frequently

4.1. Code demonstration

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>
Copy the code

4.2. The difference between

  • nth-childSelect the number of children within the parent element, regardless of type
  • nt-of-typeSelects the element of the specified type

5. To summarize

  • The structure pseudo-class selector selects the NTH one
  • Nth-child evaluates from all children and may not be of the same type
  • Nth-of-type specifies a child of the same type, such as ul li:nth-of-type(2) selects the second Li
  • So nth-child (n), we need to know that n starts at zero, and we need to remember the usual formulas
  • If it was an unordered list, we would definitely use nth-child more
  • No Spaces can be added when using structural pseudo-classes
  • Write to the child box, select based on the parent box
  • N starts at 1, has multiples, minus n plus something, no minus n minus something
  • Reduce giving boxes useless class names