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-child» егжей-тегжейлі түсіндірді

Жоғарыдағы кодтағы css1 мағынасы екінші еншілес элемент және типі «div», сондықтан тек div1 таңдалады. div1 - бұл ата-аналық контейнердегі екінші еншілес элемент және түрі «div». p3 - бұл ата-аналық контейнердің екінші еншілес элементі, бірақ ол «div» түріне жатпайды, сондықтан ол таңдалмайды. Егер стильді селектордың алдындағы дивты алып тастайтындай етіп өзгертсек, онда p3 де таңдалады.

«: Бірінші бала» егжей-тегжейлі түсіндірді

Жоғарыдағы кодтағы css2 мағынасы бірінші еншілес элемент, ал типі p, сондықтан тек p1 таңдалады. p1 - ​​бұл ата-ана контейнеріндегі бірінші еншілес элемент және түрі «p». Оның мағынасы жоғарыда келтірілген «: nth-балаға» ұқсас. Егер сіз параметрді 1-ге жіберу үшін «: nth-бала» сөзін қолдансаңыз, онда нәтиже бірдей болады.

«: Бірінші тип» егжей-тегжейлі түсіндірді

Жоғарыда келтірілген кодтағы css3 мағынасы бірінші типтің «p» қосалқы элементі болып табылады.Мұндағы жоғарыдағы екі селектордан айырмашылығы алдымен сәйкес тип табылып, содан кейін түрге сәйкес келетін бірінші элемент алынады . Сонымен таңдалған p1 және p3. P1 және p3 екеуі де негізгі контейнердегі алғашқы «p» элементтері болып табылады.