The nth-of-type requires attention when selecting a class. nth-of-typeclass

The nth-of-type requires attention when selecting a class. nth-of-typeclass

I checked the w3 and MDN manuals and did not find this instruction. I wrote down it as soon as possible.

1, . Class: nth-of-type (n)When selecting a class, if you insert x tags of the same type before the class, n needs to add x

<! DOCTYPE html> <meta http-equiv = "Content-Type" content = "text/html; character = UTF-8"> 

 
When a p is inserted before the first 1st p. para:
<P> I am a common p tag </p> <p class = "para"> I am 1st p. para label </p> <p class = "para"> I have 2nd p. para tag </p>

At this time,. para: nth-of-type (2) will be the first p. para style to take effect. The jQuery selector is the same:

2. If Multiple labels have the same class ,. class: nth-of-type (n) When you select class, the nth class element of all labels is selected. jQuery only selects the nth class element of the first label.
<Div class = "para"> I am a 1st div. para label </div> <div class = "para"> I have 2nd Divs. para tag </div> <div> I am a common div tag </div> <section class = "para"> I am a 1st section. para label </section> <section class = "para"> I have 2nd sections. para label </section> <section> I am a common section label </section> <p class = "para"> I am 1st p. para label </p> <p class = "para"> I have 2nd p. para tag </p> <p> I am a common p tag </p>


 
SuggestionsWhen adding a styleUse tag: nth-of-type (n) or tag. class: nth-of-type (n) to filter elements