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
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
}