Casual -- pseudo-class selector: The difference between nth-child (n) and nth-of-type (n !!!, Nthoftypen

Casual -- pseudo-class selector: The difference between nth-child (n) and nth-of-type (n !!!, Nthoftypen

Not much talk! Answer the question !!!

I. E: nth-child (n) // select the (n) element in the parent element. if the nth element is E, it is selected. If the nth element is not E, it is not selected. N can be 2n (even), 2n + 1 (ODD), and so on...

II. E: nth-of-type (n) // select the (n) element of the parent element as E. The value of n is the same as that of n.

 

Iii. Example>

(1) We can see that both of them can achieve the desired effect. There is no difference... (Look down !)

 

 

(2) The difference between the two is as follows: li: nth-child (2) directly select the second element of the parent element // li: nth-of-type (2) select the second li element from the parent element.

 

Take a deep breath.

(3) The following figure can better determine their differences...

If we add a span to it, different results will be displayed. We can see that nth-child is greatly affected by the above, while nth-of-type can be accurately selected, no matter whether the tag is added or not ///

 

In this way, through the example, we will know the meaning of the first and second points above !!!