CSS-д ": nth-child", ": first-child" болон ": first-of-type" хоорондох ялгаа

Лавлагаа

Нарийвчилсан тайлбар

Нэгдүгээрт, дараахь HTML загвар кодыг авч үзье, энэ кодоор дамжуулан гурван сонгогчийн хэрэглээг нэг нэгээр нь ойлгох болно.

            <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 хүүхэд" гэж дэлгэрэнгүй тайлбарлав

Дээрх код дахь css1-ийн утга нь хоёр дахь нэмэлт элемент бөгөөд төрөл нь "div" тул зөвхөн div1-ийг сонгоно. div1 бол эцэг эхийн контейнерийн хоёр дахь нэмэлт элемент бөгөөд төрөл нь "div" юм. p3 нь эх савны хоёрдахь нэмэлт элемент боловч "div" төрлийнх биш тул сонгоогүй байна. Хэрэв бид сонгогчын өмнө байрлах div-ийг арилгахын тулд хэв маягийг өөрчилбөл p3 бас сонгогдоно.

": Анхны хүүхэд" гэж дэлгэрэнгүй тайлбарлав

Дээрх код дээрх css2-ийн утга нь анхны дэд элемент бөгөөд төрөл нь p тул зөвхөн p1-ийг сонгоно. p1 бол эцэг эхийн контейнерийн анхны нэмэлт элемент бөгөөд төрөл нь "p" юм. Энэ нь дээрх ": nth-хүүхэд" -тэй ижил төстэй утгатай бөгөөд хэрэв та параметрийг 1-д дамжуулахад ": nth-child" -г ашиглавал үр нөлөө нь яг ижил байна.

": First-of-type" -ийг нарийвчлан тайлбарлав

Дээрх кодонд байгаа css3-ийн утга нь эхний төрөл нь "p" -ийн дагалдах элемент юм. Дээрх хоёр сонгон шалгаруулагчийн ялгаа нь эхлээд харгалзах төрлийг олж, дараа нь тухайн төрөлд тохирох эхний элементийг авах явдал юм. . Тиймээс сонгосон нь p1 ба p3 байна. P1 ба p3 хоёулаа эцэг эхийн саванд орсон эхний "p" элементүүд юм.