Beda antara ": nth-child", ": first-child" sareng ": first-of-type" dina CSS

Rujukan

Katerangan anu lengkep

Mimiti, hayu urang tingali kode conto HTML ieu, ngalangkungan kode ieu urang bakal ngartos panggunaan tilu pamilih hiji-hiji.

            <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" ngajelaskeun sacara jéntré

Harti css1 dina kode diluhur nyaéta unsur budak kadua sareng jinisna nyaéta "div", janten ngan div1 anu dipilih. div1 mangrupikeun unsur budak kadua dina wadah kolot sareng jinisna nyaéta "div". p3 mangrupikeun unsur kadua pikeun wadah indung, tapi éta henteu jinis "div" janten henteu dipilih. Upami urang ngarobih gaya pikeun miceun div payuneun pamilih, maka p3 ogé bakal dipilih.

": Budak kahiji" ngajelaskeun sacara jéntré

Hartosna css2 dina kode di luhur mangrupikeun unsur anak anu munggaran sareng jinisna nyaéta p, janten ngan ukur p1 anu dipilih. p1 mangrupikeun unsur anak anu mimiti dina wadah kolot sareng jinisna nyaéta "p". Éta ngandung hartos anu sami sareng ": nth-child" di luhur. Upami anjeun nganggo ": nth-child" pikeun ngalirkeun parameter ka 1, pangaruhna sami persis.

": Mimiti-tina-jenis" dipedar sacara rinci

Hartosna css3 dina kode di luhur nyaéta yén jinis anu munggaran mangrupikeun unsur anak "p". Bédana di dieu tina dua pamilih di luhur nyaéta yén jinis anu saluyu mimiti dipanggihan, teras unsur anu munggaran anu cocog sareng jinis anu diala . Janten anu kapilih nyaéta p1 sareng p3. Duanana p1 sareng p3 mangrupikeun unsur "p" anu munggaran dina wadah induk.