The difference between nth-child and :nth-of-type

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,

and ele:nth-child(n) refers to the nth element under the parent element and this element is ele , if not, the selection fails.

Example:

　

1

　　

1

　　

2

.box p:nth-child(1){

　Color:red; //Selection failed because the first child element under .box is not p

}

.box p:nth-child(2){

　Color:red; //The selected element is

1

}

.box p:nth-child(3){

　color:red; //The selected element is

2

}

.box p:nth-of-type(1){

　color:red; //The selected element is

1

}