Forskellen mellem ": nth-child", ": first-child" og ": first-of-type" i CSS

Reference

Detaljeret forklaring

Lad os først se på følgende HTML-prøvekode, gennem denne kode vil vi forstå brugen af ​​de tre vælgere en efter en.

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

": Nth-child" forklaret i detaljer

Betydningen af ​​css1 i ovenstående kode er det andet underordnede element, og typen er "div", så kun div1 er valgt. div1 er det andet underordnede element i den overordnede beholder, og typen er "div". p3 er det andet underordnede element i den overordnede container, men det er ikke af typen "div", så det er ikke valgt. Hvis vi ændrer stilen for at fjerne div foran vælgeren, vælges også p3.

": Første barn" forklaret i detaljer

Betydningen af ​​css2 i ovenstående kode er det første underordnede element, og typen er p, så kun p1 er valgt. p1 er det første underordnede element i den overordnede beholder, og typen er "p". Det har en lignende betydning som ovenstående ": nth-child". Hvis du bruger ": nth-child" til at overføre parameteren til 1, er effekten nøjagtig den samme.

": First-of-type" forklaret i detaljer

Betydningen af ​​css3 i ovenstående kode er, at den første type er et underordnet element af "p". Forskellen her fra de ovennævnte to vælgere er, at den tilsvarende type først findes, og derefter opnås det første element, der matcher typen . Så de valgte er p1 og p3. Både p1 og p3 er de første "p" -elementer i moderbeholderen.