The most misunderstood 10 CSS selectors

These selectors include First-child, Last-child, Only-child, Nth-child (n), Nth-last-child (n), and First-of-type, Last-of-type, Only-of-type, Nth-of-type (n), Nth-last-of-type (n). Of all the selectors, these 10 selectors are probably the most misunderstood selectors.

First, about N

1) The expression of n is: xn + y. such as 1, 2n, 2n+1.

2) Nth-child (n) series n is the number of all child elements of the parent element, and N Nth-type-child (n) only numbers the elements of the same type, ignoring the other elements of the intermediate inclusions.

Second, E:first-child and E:first-child

The above two kinds of writing is not the same, the difference is: there is no space before the first-child, there are no spaces, the difference is very large, this is the most easily misunderstood place.

1) E:first-child with no spaces means "Select e element, e element is the first child element of its parent element";

2) A e:first-child with a space means "Select the first child element of the E element."

The most misunderstood 10 CSS selectors