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-бала" кеңири түшүндүрүп берди

Жогорудагы коддогу css1 мааниси экинчи кошумча элемент жана түрү "div", ошондуктан div1 гана тандалат. div1 - бул ата-эне контейнериндеги экинчи кошумча элемент жана түрү "div". p3 - бул ата-эне контейнеринин экинчи кошумча элементи, бирок ал "div" тибинде эмес, ошондуктан ал тандалган эмес. Эгерде стилди селектордун алдындагы дивди алып салуу үчүн өзгөртсөк, анда p3 да тандалат.

": Биринчи бала" деп кеңири түшүндүрүп берди

Жогорудагы коддогу css2 мааниси биринчи кошумча элемент жана түрү p болгондуктан, p1 гана тандалат. p1 - ​​бул ата-эне контейнериндеги биринчи кошумча элемент жана түрү "p". Жогорудагы ": nth-бала" менен окшош мааниге ээ. Эгер параметрди 1ге өткөрүү үчүн ": nth-child" колдонсоңуз, анда эффект так ушундай.

": Биринчи типтеги" деталдуу түрдө түшүндүрүп берди

Жогорудагы коддогу css3 мааниси биринчи түрү "p" персоналдык элементи болуп саналат.Бул жерде жогорудагы эки селектордун айырмачылыгы алгач тиешелүү түрү табылып, андан кийин типке дал келген биринчи элемент алынат . Ошентип, тандалгандар p1 жана p3. P1 жана p3 экөө тең ата-контейнердеги биринчи "p" элементтери.