Разликата между ": nth-child", ": first-child" и ": first-of-type" в CSS

Справка

Подробно обяснение

Първо, нека да разгледаме следния примерен код на 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>
        

„: N-то дете“ е обяснено подробно

Значението на css1 в горния код е вторият дъщерен елемент и типът е "div", така че е избран само div1. div1 е вторият дъщерен елемент в родителския контейнер и типът е "div". p3 е вторият дъщерен елемент на родителския контейнер, но не е от тип "div", така че не е избран. Ако модифицираме стила, за да премахнем div пред селектора, тогава ще бъде избран и p3.

„: Първо дете“ е обяснено подробно

Значението на css2 в горния код е първият дъщерен елемент и типът е p, така че е избран само p1. p1 е първият дъщерен елемент в родителския контейнер и типът е "p". Той има подобно значение на горното ": nth-child". Ако използвате ": nth-child", за да предадете параметъра на 1, ефектът е абсолютно същият.

": First-of-type" обяснено подробно

Значението на css3 в горния код е, че първият тип е дъщерен елемент на "р". Разликата тук от горните два селектора е, че съответният тип се намира първо и след това се получава първият елемент, който съответства на типа . Така че избраните са p1 и p3. Както p1, така и p3 са първите елементи "p" в родителския контейнер.