CSS selector: The difference between First-child and: First-of-type

: The First-child selector is a selector defined in Css2, and is understood literally as a first child element. For example, there is a segment code:

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

h1:first-child matches no element, because here H1 is the second child element of the Div, not the first one;

Span:first-child does not match any elements, as there are two span elements that are not the first child elements of a div;

: First-child matches the P element, because the first child element of the div here is p.

Then, in the CSS3 also defined: First-of-type this selector, this with: First-child What is the difference? Or look at that piece of code:

P:first-of-type matches the P element, because P is the first of all the child elements of P, and in fact there is only one child element of P;

H1:first-of-type matches to the H1 element, because H1 is the first of all the sub-elements of the div that are H1, and in fact there is only one child element for the H1;

Span:first-of-type matches the third child element span. Here Div has two child elements for span, matching to the first one.

: The First-of-type matches the P element

Therefore, through the above two examples can draw a conclusion:

: First-child matches the first child element of a parent element, which can be said to be the first child of a structure.

: First-of-type matches the first of the type, what is the type, which is what the colon precedes, such as P:first-of-type, which refers to the first of all P elements. There is no longer a limit to the first child element, as long as it is the first of the elements of the type, of course, the scope of these elements belong to the same level, that is, peers.

The same types of selectors: Last-child and: Last-of-type,: Nth-child (N), and: Nth-of-type (n) can also be understood.

CSS selector: The difference between First-child and: First-of-type