CSS Selector Nth-child series and Nth-of-type series differences

Nth-child is the element that selects all elements under the current parent element, while Nth-of-type represents the first element of a given type that selects a parent element.

For example, select the first P element under the p parent element, so you can write:

Parent>p:first-child or Parent>p:first-of-type, the first way to do this is that there is nothing wrong with the initial element p under the parent element. However, the first element under the parent element is not a P tag and the problem occurs. For example, the first element is span. The first P-element is not taken. The second one can normally get the first P element under the parent element. Thus. Nth-child series. is to get the element based on the parent element as a whole. The Nth-of-type, in turn, obtains the corresponding element based on a given type under the parent element.

CSS Selector Nth-child series and Nth-of-type series differences