An difríocht idir ": nth-child", ": first-child" agus ": first-of-type" i CSS

Tagairt

Míniú mionsonraithe

Ar dtús, déanaimis féachaint ar an gcód samplach HTML seo a leanas, tríd an gcód seo tuigfimid úsáid na dtrí roghnóir ceann ar cheann.

            <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" a mhínítear go mion

Is é brí css1 sa chód thuas an dara heilimint linbh agus is é an cineál "div", mar sin ní roghnaítear ach div1. Is é div1 an dara heilimint linbh sa mháthair-choimeádán agus is é an cineál "div". Is é p3 an dara gné linbh den mháthair-choimeádán, ach níl sé de chineál "div" mar sin ní roghnaítear é. Má athraímid an stíl chun an div a bhaint os comhair an roghnóra, roghnófar p3 freisin.

": An chéad leanbh" a mhínítear go mion

Is é brí css2 sa chód thuas an chéad eilimint linbh agus is é p an cineál, mar sin ní roghnaítear ach p1. Is é p1 an chéad eilimint linbh sa mháthair-choimeádán agus is é an cineál "p". Tá an bhrí chéanna leis an méid thuas ": nth-child". Má úsáideann tú ": nth-child" chun an paraiméadar a rith go 1, tá an éifeacht díreach mar an gcéanna.

": Céad-de chineál" mínithe go mion

Is é an bhrí atá le css3 sa chód thuas ná gur eilimint linbh de “p” an chéad chineál. Is í an difríocht anseo ón dá roghnóir thuas ná go bhfaightear an cineál comhfhreagrach ar dtús, agus ansin go bhfaightear an chéad eilimint a mheaitseálann an cineál. . Mar sin is iad na cinn roghnaithe p1 agus p3. Is iad p1 agus p3 araon na chéad eilimintí "p" sa mháthair-choimeádán.