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;

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 the div that have the type P;

H1:first-of-type matches to the H1 element, because H1 is the first of all the subtypes of the div that are H1 child elements;

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

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 child elements of the same type under a parent element, such as P:first-of-type, which refers to the first of all child elements of type P. There is no longer a limit to the first child element, as long as it is the first of the elements of that type.

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

Description: This article turns from http://www.cnblogs.com/2050/p/3569509.html, thanks to Yumbo Master's experience!

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