What is the difference between nth-child and: nth-of-type in CSS3

This article mainly introduces the difference between CSS3: nth-child and: nth-of-type, which has certain reference value, interested friends can refer to, hope you can learn a lot after reading this article, let the editor take you to understand it.

: nth-child can select the word element under the parent element, or: nth-of-type can. But what's the difference between them?

In fact, the difference is very simple: why is nth-of-type called nth-of-type? Because it is distinguished by "type". That is to say: ele:nth-of-type (n) refers to the nth ele element under the parent element, while ele:nth-child (n) refers to the nth element under the parent element and this element is ele, if not, the selection fails.

A small example is attached here:

Zero

One two

In the above example, .demo li:nth-child (2) selects the one node, while .demo li:nth-of-type (2) selects the two node.

Thank you for reading this article carefully. I hope the article "in CSS3: what is the difference between nth-child and nth-of-type" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!