Разлика између „: нтх-цхилд“, „: фирст-цхилд“ и „: фирст-оф-типе“ у ЦСС-у

Референца

Детаљно објашњење

Прво, погледајмо следећи узорак ХТМЛ кода, кроз овај код ћемо разумети употребу три селектора један по један.

            <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>
        

„: Н-дете“ је детаљно објашњено

Значење цсс1 у горњем коду је други подређени елемент и тип је „див“, па је одабран само див1. див1 је други подређени елемент у надређеном контејнеру, а тип је "див". п3 је други подређени елемент надређеног контејнера, али није типа "див", па није изабран. Ако модификујемо стил тако да уклонимо див испред селектора, тада ће бити изабран и п3.

Детаљно објашњено „Прво дете“

Значење цсс2 у горњем коду је први подређени елемент и тип је п, па је одабран само п1. п1 је први подређени елемент у надређеном контејнеру, а тип је "п". Има слично значење као горе: „нтх-цхилд". Ако користите „: нтх-цхилд" за прослеђивање параметра на 1, ефекат је потпуно исти.

„: Први тип“ је детаљно објашњено

Значење цсс3 у горњем коду је да је први тип подређени елемент „п“. Разлика овде од горња два селектора је у томе што се прво пронађе одговарајући тип, а затим се добија први елемент који одговара типу . Дакле, изабрани су п1 и п3. И п1 и п3 су први „п“ елементи у надређеном контејнеру.