How does the css3 selector select the first element of the same class under the same parent nth-child nth-of-type

1

2

3

4

5

Choose the first class name: .demo .item: nth-of-type(1) {…} || .demo .item: nth-child(1) {… };

Choose the last class name: .demo .item: last-child {… };

Select one of the specified class names: .demo .item: nth-of-type(x) {…} || .demo .item: nth-child(x) {… };

So what is the difference between nth-of-type and nth-child
: nth-child(n) selector, which selects the nth child element of the parent element, regardless of the element type.
:nth-of-type(n) selector, the selector selects the nth child element of the specified type of the parent element.
Look at the code:

1

2

666

3

4

5

.demo .item:nth-child(4){ color: yellow;} .demo .item:nth-of-type(4){ color: blue;}! [insert image description here](https://img -blog.csdnimg.cn/20200628225644926.png) We can see: 1. nth-child starts to calculate n under the parent element demo, without distinguishing the type of the element 2. nth-of-type is in the parent element demo Next, find the element of type .item