Разликата помеѓу „: 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>
        

„Деветто дете“ детално објасни

Значењето на css1 во горенаведениот код е втор детски елемент и типот е „div“, така што е избран само div1. div1 е втор детски елемент во родителскиот контејнер и типот е „div“. p3 е втор елемент за деца од родителскиот контејнер, но не е од типот "div", затоа не е избран. Ако го измениме стилот за да го отстраниме поделбата пред селекторот, тогаш ќе биде избран и p3.

": Прво дете", детално објасни

Значењето на css2 во горенаведениот код е првиот детски елемент и типот е p, па затоа е избран само p1. p1 е првиот елемент за деца во контејнерот за родители и типот е "p". Има слично значење со горенаведеното „: nth-child“. Ако користите „: nth-child“ за да го предадете параметарот на 1, ефектот е потполно ист.

": Прв од типот" детално објаснето

Значењето на css3 во горенаведениот код е дека првиот тип е детски елемент на "p". Разликата тука од горенаведените два избирачи е во тоа што најпрво се наоѓа соодветниот тип, а потоа се добива првиот елемент што одговара на типот . Значи избраните се p1 и p3. И p1 и p3 се првите "p" елементи во матичниот контејнер.