CSS'de ": nth-child", ": first-child" ve ": first-of-type" arasındaki fark

Referans

Detaylı açıklama

Öncelikle aşağıdaki HTML örnek koduna bakalım, bu kod aracılığıyla üç seçicinin kullanımını tek tek anlayacağız.

            <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. çocuk" ayrıntılı olarak açıkladı

Yukarıdaki kodda css1'in anlamı ikinci alt öğedir ve türü "div" dir, bu nedenle yalnızca div1 seçilir. div1, üst kapsayıcıdaki ikinci alt öğedir ve tür, "div" dir. p3, üst kapsayıcının ikinci alt öğesidir, ancak "div" türünde olmadığından seçilmemiştir. Seçicinin önündeki div'i kaldırmak için stili değiştirirsek, p3 de seçilecektir.

": İlk çocuk" ayrıntılı olarak açıkladı

Yukarıdaki kodda css2'nin anlamı ilk çocuk elemandır ve tipi p'dir, bu nedenle sadece p1 seçilir. p1, üst kapsayıcıdaki ilk alt öğedir ve türü "p" dir. Yukarıdaki ": nth-child" ile benzer bir anlamı vardır. Parametreyi 1'e geçirmek için ": nth-child" kullanırsanız, etki tamamen aynıdır.

": İlk türünün" ayrıntılı açıklaması

Yukarıdaki kodda css3'ün anlamı, birinci türün "p" nin alt öğesi olmasıdır.Buradaki iki seçiciden farkı, karşılık gelen türün önce bulunması ve ardından türle eşleşen ilk öğenin elde edilmesidir. . Yani seçilenler p1 ve p3'tür. Hem p1 hem de p3, ana kaptaki ilk "p" öğeleridir.