The difference between first-child and first-of-type in the css Selector,

The difference between first-child and first-of-type in the css Selector,

: The first-child selector is the selector defined in css2. It is also the first sub-element to be understood literally. For example, there is a code segment:

P: first-child matches the p element, because the p element is the first child element of the div;

H1: first-child does not match any element, because h1 is the second child element of div, not the first one;

Span: first-child does not match any element, because both span elements are not the first child element of div;

 

Then, the selector first-of-type is defined in css3. What is the difference between this selector and first-child? Let's look at the Code:

P: first-of-type matches the p element, because p is the first of all the child elements of the div whose type is p;

H1: first-of-type matches the h1 element, because h1 is the first of all the child elements of div whose type is h1;

Span: first-of-type matches the third child element span. Here, div has two child elements of span, matching the first of them.

 

Therefore, the above two examples can draw a conclusion:

: First-childMatching is the first child element of a parent element. It can be said that it is the first child element in the structure.

: First-of-typeMatch the first child element of the same type under a parent element. For example, p: first-of-type indicates the first child element of all types p. It is no longer the first child element, as long as it is the first element of this type.

The same type of selector: last-child and: last-of-type,: nth-child (n) and: nth-of-type (n) can also be understood in this way.