Erinevus CSS-is ": n-laps", ": esimene laps" ja ": esimene-tüüp" vahel

Viide

Üksikasjalik selgitus

Kõigepealt vaatame järgmist HTML-i näidiskoodi, selle koodi kaudu mõistame kolme valija kasutamist ükshaaval.

            <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-laps" selgitas üksikasjalikult

Css1 tähendus ülaltoodud koodis on teine ​​alamelement ja tüüp on "div", seega valitakse ainult div1. div1 on vanemmahuti teine ​​algelement ja tüüp on "div". p3 on vanemmahuti teine ​​alamelement, kuid see ei ole tüüpi "div", seega pole see valitud. Kui me muudame stiili eemaldamaks div valija ees, valitakse ka p3.

": Esimene laps" selgitati üksikasjalikult

Css2 tähendus ülaltoodud koodis on esimene alamelement ja tüüp on p, seega valitakse ainult p1. p1 on vanemmahuti esimene alamelement ja tüüp on "p". Sellel on sarnane tähendus ülaltooduga ": n-laps". Kui kasutate parameetri 1-le edastamiseks ": n-laps", on efekt täpselt sama.

": First-of-type" on üksikasjalikult selgitatud

Css3 tähendus ülaltoodud koodis on see, et esimene tüüp on "p" alamelement. Erinevus kahest ülaltoodud valikust on see, et kõigepealt leitakse vastav tüüp ja seejärel saadakse esimene tüüp, mis sobib tüübiga . Seega on valitud p1 ja p3. Nii p1 kui p3 on esimesed "p" elemendid vanemmahutis.