Qhov sib txawv ntawm ": nth-menyuam", ": thawj tus menyuam" thiab ": thawj-ntawm-hom" hauv CSS

Kev siv

Cov lus qhia ntxaws ntxaws

Ua ntej, cia saib ntawm cov qauv lus HTML hauv qab no, dhau ntawm cov cai no peb yuav nkag siab qhov kev siv ntawm peb qho kev xaiv ib los ntawm ib.

            <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-menyuam" tau piav qhia txhua qhov

Lub ntsiab lus ntawm css1 hauv tus lej saum toj saud yog tus menyuam thib ob thiab hom yog "div", yog li xaiv div1 nkaus xwb. div1 yog tus menyuam thib ob hauv lub thawv niam txiv thiab hom yog "div". p3 yog tus menyuam thib ob ntawm niam txiv lub thawv, tab sis nws tsis yog hom "div" yog li nws tsis raug xaiv. Yog tias peb hloov kho cov style kom tshem tawm cov div ua ntej ntawm tus xaiv, ces p3 kuj tseem yuav tau xaiv.

": Thawj-tus menyuam" piav qhia qhov tseeb

Lub ntsiab lus ntawm css2 hauv tus lej saum toj no yog thawj tus menyuam thiab hom yog p, yog li xaiv p1 nkaus xwb. p1 yog thawj tus menyuam thawj zaug hauv lub thawv niam txiv thiab hom yog "p". Nws muaj cov ntsiab lus zoo sib xws rau saum toj no ": nth-menyuam". Yog tias koj siv ": nth-menyuam" dhau los ntsuas tus lej rau 1, cov nyhuv yog zoo ib yam.

": Ua ntej-ntawm-hom" piav qhia hauv kev nthuav dav

Lub ntsiab lus ntawm css3 nyob rau hauv qhov kev cai saum toj saud yog thawj hom yog cov menyuam yaus ntawm "p". Qhov txawv ntawm no los ntawm ob qho kev xaiv saum toj no yog tias hom sib txuam tau pom thawj zaug, thiab tom qab ntawd ces thawj lub ntsiab uas txuam nrog hom tau Cov. Yog li cov neeg raug xaiv yog p1 thiab p3. Ob qho p1 thiab p3 yog thawj zaug "p" hauv lub thawv niam txiv.