A,:nth-child

1.1 illustrates

The: nth-Child (n) selector matches the NTH child of its parent, regardless of the element’s type. N can be a number, keyword, or formula.

Note: If the NTH child element is different from the selected element type, the style is invalid!

1.2 the sample

<style> div>p:nth-child(2){ color:red; } </style> <div> <p> I am the first paragraph </p>< p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> It's going to be selected here, it's going to be red. -- > < p > I am a third paragraph < / p > < / div > < div > < p > I am the first paragraph < / p > < span > I am the first text < / span > <! <p> </div> </p>Copy the code

Second,:nth-of-type

2.1 illustrates

The :nth-of-type(n) selector matches each element of the NTH child of a specific type belonging to the parent element. N can be a number, keyword, or formula.

2.2 the sample

<style> div>p:nth-of-type(2){ color:red; } </style> <div> <p> I am the first paragraph </p>< p> <p> is the second <p> element of the parent <div>. </p>< div> <p> <p> I am the first paragraph </p>< blockquote> <p> I am the second paragraph </p><! <p> is the second <p> element of the parent <div>. This is selected, it's red --> <p> I'm the third paragraph </p> </div>Copy the code

Copyright statement

All original articles in this blog are copyrighted by the authors. Reprint must include this statement, keep this article complete, and hyperlink the author and the original address of this article: blog.mazey.net/431.html

(after)