La diferenco inter ": nth-child", ": first-child" kaj ": first-of-type" en CSS

Referenco

Detala klarigo

Unue ni rigardu la jenan HTML-ekzemplan kodon, per ĉi tiu kodo ni komprenos la uzadon de la tri elektiloj unu post la alia.

            <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-infano" detale klarigis

La signifo de css1 en la supra kodo estas la dua infana elemento kaj la tipo estas "div", do nur div1 estas elektita. div1 estas la dua infana elemento en la gepatra ujo kaj la tipo estas "div". p3 estas la dua infana elemento de la gepatra ujo, sed ĝi ne estas de tipo "div" do ĝi ne estas elektita. Se ni modifos la stilon por forigi la div antaŭ la elektilo, tiam ankaŭ p3 estos elektita.

": Unua infano" detale klarigis

La signifo de css2 en la supra kodo estas la unua infana elemento kaj la tipo estas p, do nur p1 estas elektita. p1 estas la unua infana elemento en la gepatra ujo kaj la tipo estas "p". Ĝi havas similan signifon al la supra ": n-infano". Se vi uzas ": n-infano" por transdoni la parametron al 1, la efiko estas ĝuste la sama.

": Unua-speca" detale klarigita

La signifo de CSS3 en la supra kodo estas, ke la unua tipo estas infana elemento de "p". La diferenco ĉi tie de la supraj du elektiloj estas, ke unue troviĝas la responda tipo, kaj tiam la unua elemento, kiu kongruas kun la tipo, estas akirita. . Do la elektitaj estas p1 kaj p3. Ambaŭ p1 kaj p3 estas la unuaj "p" elementoj en la gepatra ujo.