Te rereketanga i waenga i ": nth-child", ": first-child" me ": first-of-type" i te CSS

Tohutoro

He whakamaarama taipitopito

Tuatahi, kia tirohia nga tohu tauira HTML e whai ake nei, ma roto i tenei tohu ka mohio taatau ki te whakamahinga o nga kai-whiriwhiri e toru.

            <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>
        

": Tamaiti-tama" i whakamarama taipitopito

Ko te tikanga o te css1 kei roto i te waehere o runga ake ko te kaupapa tuarua a te tamaiti, ko te momo ko "div", no reira div1 anake i kowhiria. Ko te div1 te mea tuarua o te tamaiti kei roto i te ipu a nga matua, ko te momo "div". Ko te p3 te tamaiti tuarua o te ipu a te matua, engari kaore i te momo "div" na kaore i tohua. Mena ka whakarerekehia e maatau te taera hei tango i te div i mua o te kaiarahi, katahi ka tohua p3.

": Tuatahi-Tama" i whakamarama taipitopito

Ko te tikanga o te css2 kei roto i te waehere o runga ake nei ko te mea tuatahi mo te tamaiti ko te momo he p, na ko te p1 anake ka tohua Ko te p1 te mea tuatahi o te tamaiti kei roto i te ipu a nga matua, ko te momo ko te "p". He rite te tikanga ki nga mea o runga ake nei: "nth-child". Mena ka whakamahia e koe ": nth-child" ki te paahitia te tawhā ki te 1, he orite tonu te paanga.

": Tuatahi-o-momo" i whakamarama taipitopito

Ko te tikanga o te css3 i te waehere o runga ake nei ko te momo tuatahi he huanga tamariki na "p". Ko te rereketanga i konei mai i nga kaiwhakauru e rua i runga ake nei ko te momo e tika ana ka kitea, katahi ka riro te waahanga tuatahi e haangai ana ki te momo. . Na ko nga mea kua tohua he p1 me te p3. Ko nga p1 me te p3 nga mea tuatahi "p" i roto i te ipu matua.