Розніца паміж ": 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, эфект сапраўды такі ж.

": Першы ў сваім родзе" падрабязна растлумачаны

Значэнне css3 у прыведзеным вышэй кодзе заключаецца ў тым, што першы тып з'яўляецца даччыным элементам "р". Адрозненне тут ад двух вышэйзгаданых селектараў заключаецца ў тым, што спачатку знойдзены адпаведны тып, а затым атрыманы першы элемент, які адпавядае тыпу . Такім чынам, выбраныя - p1 і p3. І p1, і p3 з'яўляюцца першымі элементамі "p" у бацькоўскім кантэйнеры.