Id-differenza bejn ": nth-child", ": first-child" u ": first-of-type" fis-CSS

Referenza

Spjegazzjoni dettaljata

L-ewwel, ejja nħarsu lejn il-kodiċi tal-kampjun HTML li ġej, permezz ta 'dan il-kodiċi nifhmu l-użu tat-tliet seletturi wieħed wieħed.

            <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" spjegat fid-dettall

It-tifsira ta 'css1 fil-kodiċi ta' hawn fuq hija t-tieni element wild u t-tip huwa "div", għalhekk div1 biss huwa magħżul. div1 huwa t-tieni element sekondarju fil-kontenitur ġenitur u t-tip huwa "div". p3 huwa t-tieni element wild tal-kontenitur ġenitur, iżda mhuwiex tat-tip "div" u għalhekk mhux magħżul. Jekk immodifikaw l-istil biex inneħħu d-div quddiem is-selettur, allura jintgħażel ukoll p3.

": L-ewwel wild" spjegat fid-dettall

It-tifsira ta 'css2 fil-kodiċi ta' hawn fuq hija l-ewwel element wild u t-tip huwa p, għalhekk p1 biss huwa magħżul. p1 huwa l-ewwel element sekondarju fil-kontenitur ġenitur u t-tip huwa "p". Għandu tifsira simili għal dik ta 'hawn fuq ": nth-child". Jekk tuża ": nth-child" biex tgħaddi l-parametru għal 1, l-effett huwa eżattament l-istess.

": L-Ewwel tat-tip" spjegat fid-dettall

It-tifsira ta 'css3 fil-kodiċi ta' hawn fuq hija li l-ewwel tip huwa element tifel ta '"p". Id-differenza hawn miż-żewġ seletturi ta' hawn fuq hija li t-tip korrispondenti l-ewwel jinstab, u allura jinkiseb l-ewwel element li jaqbel mat-tip. . Allura dawk magħżula huma p1 u p3. Kemm p1 u p3 huma l-ewwel elementi "p" fil-kontenitur ġenitur.