CSS-та ": nth-child", ": беренче бала" һәм ": беренче тип" арасындагы аерма

2021-02-19 CSS

Сылтама

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" җентекләп аңлатты

Aboveгарыдагы кодтагы css1 мәгънәсе - икенче бала элементы һәм төре "div", шуңа күрә div1 гына сайланган. div1 - ата-аналар контейнерында икенче бала элементы һәм төре "div". p3 - ата-аналар контейнерының икенче бала элементы, ләкин ул "div" тибында түгел, шуңа күрә ул сайланмаган. Әгәр дә без селектор алдында divны бетерү өчен стильне үзгәртсәк, p3 шулай ук ​​сайланачак.

": Беренче бала" җентекләп аңлатты

Aboveгарыдагы кодтагы css2 мәгънәсе - беренче бала элементы һәм төре p, шуңа күрә p1 гына сайланган. p1 - ​​ата-аналар контейнерындагы беренче бала элементы һәм төре "p". Аның югарыдагы "охшаш мәгънәсе бар: nth-child". Әгәр сез параметрны 1гә күчерү өчен ": nth-child" куллансагыз, эффект тулысынча бер үк.

": Беренче тип" җентекләп аңлатылды

Css3-нең югарыдагы кодтагы мәгънәсе: беренче тип "p" ның балалар элементы. Монда югарыдагы ике селектордан аерма шунда: тиешле төр табыла, аннары төргә туры килгән беренче элемент алына. . Шулай итеп сайланганнар p1 һәм p3. P1 һәм p3 икесе дә төп контейнердагы беренче "p" элементлары.