सीएसएसमा ": नवौं बच्चा", ": पहिलो बच्चा" र ": पहिलो प्रकारको" बीच भिन्नता

सन्दर्भ

विस्तृत विवरण

पहिले, हामी निम्न 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>
        

": Nth-child" विस्तृत रूपमा वर्णन गरियो

माथिको कोडमा css1 को अर्थ दोस्रो बच्चा तत्व हो र प्रकार "div" हो, त्यसैले मात्र Div1 चयन गरियो। Div1 अभिभावक कन्टेनर मा दोस्रो बच्चा तत्व हो र प्रकार "div" हो। p3 अभिभावक कन्टेनरको दोस्रो बच्चा तत्व हो, तर यो "Div" प्रकारको हुँदैन त्यसैले यसलाई चयन गरिएको छैन। यदि हामी चयनकर्ताको अगाडि डिभ हटाउन शैली परिमार्जन गर्दछौं भने p3 पनि चयन हुनेछ।

": पहिलो बच्चा" विस्तृत रूपमा वर्णन गरियो

माथिको कोडमा css2 को अर्थ पहिलो बच्चा तत्व हो र प्रकार p हो, त्यसैले मात्र p1 चयन गरिएको छ। p1 प्यारेन्ट कन्टेनरमा पहिलो बच्चा तत्व हो र प्रकार "p" हो। माथिको "nth-child" सँग यस्तै मिल्दोजुल्दो अर्थ छ। यदि तपाइँ प्यारामिटर १ मा पार गर्न ": nth-child" प्रयोग गर्नुहुन्छ भने, प्रभाव उस्तै उस्तै हो।

": पहिलो प्रकारको" विस्तृत रूपमा वर्णन गरियो

माथिको कोडमा CSS3 को अर्थ यो हो कि पहिलो प्रकार "p" को बच्चा तत्त्व हो। माथिका दुई चयनकर्ताहरूबाट यहाँ भिन्नता भनेको सम्बन्धित प्रकार पहिलो फेला पर्‍यो, र त्यसपछि पहिलो तत्त्व जुन प्रकारसँग मेल खान्छ प्राप्त हुन्छ। । त्यसोभए चयनितहरू p1 र p3 हुन्। दुबै p1 र p3 पहिलो "p" तत्वहरू मूल कन्टेनरमा छन्।