Der Unterschied zwischen ": n-tes Kind", ": erstes Kind" und ": erstes Kind" in CSS

Referenz

Ausführliche Erklärung

Schauen wir uns zunächst den folgenden HTML-Beispielcode an. Durch diesen Code werden wir die Verwendung der drei Selektoren nacheinander verstehen.

            <div id="divMain">
    <div>
        <p id="p1">p1</p>
        <div id="div1">div1</div>
        <p id="p2">p2</p>
    </div>
    <p id="p3">p3</p>
    <div id="div2">div2<div>
</div>
<style>
/*css1*/
#divMain div:nth-child(2) {
    color: blue;
}
/*css2*/
#divMain p:first-child {
    color: red;
}
/*css3*/
#divMain p:first-of-type {
    background-color: blue;
}
</style>
        

": N-tes Kind" ausführlich erklärt

Die Bedeutung von css1 im obigen Code ist das zweite untergeordnete Element und der Typ ist "div", sodass nur div1 ausgewählt ist. div1 ist das zweite untergeordnete Element im übergeordneten Container und der Typ ist "div". p3 ist das zweite untergeordnete Element des übergeordneten Containers, hat jedoch keinen Typ "div" und ist daher nicht ausgewählt. Wenn wir den Stil ändern, um das Div vor dem Selektor zu entfernen, wird auch p3 ausgewählt.

": Erstes Kind" ausführlich erklärt

Die Bedeutung von css2 im obigen Code ist das erste untergeordnete Element und der Typ ist p, sodass nur p1 ausgewählt ist. p1 ist das erste untergeordnete Element im übergeordneten Container und der Typ ist "p". Es hat eine ähnliche Bedeutung wie das obige ": n-te Kind". Wenn Sie ": n-tes Kind" verwenden, um den Parameter an 1 zu übergeben, ist der Effekt genau der gleiche.

": First-of-Type" ausführlich erklärt

Die Bedeutung von css3 im obigen Code ist, dass der erste Typ ein untergeordnetes Element von "p" ist. Der Unterschied zu den beiden obigen Selektoren besteht darin, dass der entsprechende Typ zuerst gefunden wird und dann das erste Element erhalten wird, das dem Typ entspricht . Die ausgewählten sind also p1 und p3. Sowohl p1 als auch p3 sind die ersten "p" -Elemente im übergeordneten Container.