सीएसएस मधील ": नववी मुला", ": प्रथम-मूल" आणि ": प्रथम क्रमांका" मधील फरक

संदर्भ

तपशीलवार स्पष्टीकरण

प्रथम, पुढील 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>
        

": नववी मुलाने" सविस्तरपणे सांगितले

वरील कोडमधील CSS1 चा अर्थ दुसरा मूल घटक आहे आणि प्रकार "div" आहे, म्हणून केवळ Div1 निवडले गेले आहे. Div1 हा मूळ कंटेनर मधील दुसरा मूल घटक आहे आणि प्रकार "div" आहे. p3 हा मूळ कंटेनरचा दुसरा मूल घटक आहे, परंतु तो "div" प्रकारचा नाही म्हणून तो निवडलेला नाही. जर आपण निवडकर्त्यासमोर डिव्ह काढण्यासाठी शैली सुधारित केली तर p3 देखील निवडली जाईल.

": प्रथम मुलाचे" तपशीलवार वर्णन केले

वरील कोडमधील सीएस 2 चा अर्थ पहिला मूल घटक आहे आणि प्रकार पी आहे, म्हणून केवळ पी 1 निवडला आहे. मूळ कंटेनर मध्ये पी 1 हा पहिला मूल घटक आहे आणि प्रकार "पी" आहे. उपरोक्त ": नववी मुलाला" याचा समान अर्थ आहे. जर आपण 1: पॅरामीटर पास करण्यासाठी ": nth-child" वापरत असाल तर त्याचा प्रभाव अगदी तसाच आहे.

": प्रथम क्रमांकाचे" तपशीलवार वर्णन केले

वरील कोडमधील सीएसएस 3 चा अर्थ असा आहे की पहिला प्रकार हा "पी" चा मूलभूत घटक आहे. वरील दोन निवडकर्त्यांमधील फरक असा आहे की संबंधित प्रकार प्रथम सापडतो, आणि नंतर त्या प्रकाराशी जुळणारा पहिला घटक प्राप्त केला जातो . तर निवडलेले p1 आणि p3 आहेत. दोन्ही पी 1 आणि पी 3 हे मूळ कंटेनरमधील पहिले "पी" घटक आहेत.