Het verschil tussen ": nth-child", ": first-child" en ": first-of-type" in CSS

Referentie

Gedetailleerde uitleg

Laten we eerst eens kijken naar de volgende HTML-voorbeeldcode, door deze code zullen we het gebruik van de drie selectors een voor een begrijpen.

            <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-kind" in detail uitgelegd

De betekenis van css1 in de bovenstaande code is het tweede kindelement en het type is "div", dus alleen div1 is geselecteerd. div1 is het tweede onderliggende element in de bovenliggende container en het type is "div". p3 is het tweede onderliggende element van de bovenliggende container, maar het is niet van het type "div" en is dus niet geselecteerd. Als we de stijl wijzigen om de div voor de selector te verwijderen, wordt p3 ook geselecteerd.

": Eerste kind" in detail uitgelegd

De betekenis van css2 in de bovenstaande code is het eerste onderliggende element en het type is p, dus alleen p1 is geselecteerd. p1 is het eerste onderliggende element in de bovenliggende container en het type is "p". Het heeft een soortgelijke betekenis als het bovenstaande ": nth-child". Als u ": nth-child" gebruikt om de parameter door te geven aan 1, is het effect precies hetzelfde.

": First-of-type" in detail uitgelegd

De betekenis van css3 in de bovenstaande code is dat het eerste type een onderliggend element is van "p". Het verschil hier met de bovenstaande twee selectors is dat het corresponderende type eerst wordt gevonden, en dan wordt het eerste element dat overeenkomt met het type verkregen . Dus de geselecteerde zijn p1 en p3. Zowel p1 als p3 zijn de eerste "p" -elementen in de bovenliggende container.