Der Unterschied zwischen nth-child und :nth-of-type

Warum heißt:nth-of-type:nth-of-type? Weil es durch „Typ“ unterschieden wird. Das heißt: ele:nth-of-type(n) bezieht sich auf das n-te Element unter dem übergeordneten Element,

und ele:nth-child(n) bezieht sich auf das n-te Element unter dem übergeordneten Element und Dieses Element ist ele. Wenn nicht, schlägt die Auswahl fehl.

Beispiel:

　

1

　

1

　

2

🎜>

.box p:nth-child(1){ 　color:red; //Auswahl fehlgeschlagen, da das erste untergeordnete Element unter .box nicht p ist

}

.box p:nth-child(2){

Farbe: rot; //Das ausgewählte Element ist

1

} .box p:nth-child(3){ Farbe: rot; //Das ausgewählte Element ist

2

} .box p:nth-of-type(1){ Farbe: rot; //Das ausgewählte Element ist

1

}