Musiyano uripo pakati pa ": nth-mwana", ": wekutanga-mwana" na ": wekutanga-werudzi" muCSS

Refer

Tsananguro yakadzama

Kutanga, ngatitarisei inotevera HTML sampuro kodhi, kuburikidza neiyi kodhi isu tinonzwisisa mashandisirwo evatatu vakasarudza mumwe neumwe.

            <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-mwana" akatsanangura zvakadzama

Zvinoreva css1 mune iri pamusoro kodhi chinhu chechipiri chemwana uye mhando iri "div", saka chete div1 ndiyo inosarudzwa. div1 ndiyo yechipiri chinhu chemwana mumudziyo wemubereki uye mhando iri "div". p3 ndiyo yechipiri chinhu chemwana mumudziyo wemubereki, asi haisi yerudzi "div" saka haina kusarudzwa. Kana isu tikachinja chimiro kuti tibvise div pamberi pesarudzo, ipapo p3 ichasarudzwawo.

": Wokutanga-mwana" akatsanangura zvakadzama

Zvinoreva css2 mune iri pamusoro kodhi chinhu chekutanga chemwana uye mhando iri p, saka p1 chete ndiyo inosarudzwa. p1 ndiye wekutanga mwana chinhu mumudziyo wemubereki uye mhando iri "p". Ine zvirevo zvakafanana kune zvataurwa pamusoro ": nth-mwana". Kana iwe ukashandisa ": nth-mwana" kupfuudza paramende kusvika 1, maitiro acho akafanana chaizvo.

": Yekutanga-yerudzi" yakatsanangurwa zvakadzama

Zvinorehwa necss3 mune iri pamusoro kodhi ndeyokuti yekutanga mhando chinhu chemwana che "p" .Musiyano uri pano kubva pane maviri akasarudzwa ari pamusoro ndewekuti iwo unoenderana mhando unotanga kuwanikwa, uyezve chinhu chekutanga chinowirirana nerudzi rwacho chinowanikwa. . Saka iwo akasarudzwa ari p1 uye p3. Ose p1 uye p3 ndiwo ekutanga "p" zvinhu mumudziyo wemubereki.