በ ": nth-child", ": የመጀመሪያ ልጅ" እና ": - የመጀመሪያ-ዓይነት" መካከል ያለው ልዩነት በሲ.ኤስ.ኤስ.

ዋቢ

CSS መራጭ :nth-child :first-child :first-of-type

ዝርዝር ማብራሪያ

በመጀመሪያ ፣ የሚከተሉትን የኤችቲኤምኤል ናሙና ኮድ እንመልከት ፣ በዚህ ኮድ አማካይነት የሦስቱን መራጮች አጠቃቀም አንድ በአንድ እንረዳለን ፡፡

            <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 ትርጉም ሁለተኛው የሕፃን ንጥረ ነገር ሲሆን አይነቱ “ዲቪ” ነው ስለሆነም የተመረጠው ዲቪ 1 ብቻ ነው ፡፡ div1 በወላጅ መያዣ ውስጥ ሁለተኛው የሕፃን ንጥረ ነገር ሲሆን “ዲቪ” ነው ፡፡ p3 የወላጅ መያዣ ሁለተኛው ልጅ ንጥረ ነገር ነው ፣ ግን “div” ዓይነት አይደለም ስለሆነም አልተመረጠም። ከመረጡት ፊት ለፊት ያለውን ዲቪዥን ለማስወገድ ዘይቤውን ካሻሻልን ፣ p3 እንዲሁ ይመረጣል ፡፡

"የመጀመሪያ ልጅ" በዝርዝር ተብራርቷል

ከላይ ባለው ኮድ ውስጥ የ css2 ትርጉም የመጀመሪያው የህፃን አካል ነው እና አይነቱ ፒ ነው ፣ ስለሆነም የተመረጠው ፒ 1 ብቻ ነው ፡፡ p1 በወላጅ መያዣ ውስጥ የመጀመሪያው የልጁ ንጥረ ነገር ሲሆን “p” ዓይነት ነው ፡፡ ከላይ ካለው “: nth-child” ጋር ተመሳሳይ ትርጉም አለው። ግቤቱን ወደ 1 ለማለፍ “nth-child” ን የሚጠቀሙ ከሆነ ውጤቱ በትክክል ተመሳሳይ ነው።

"-የመጀመሪያ-ዓይነት" በዝርዝር ተብራርቷል

ከላይ ባለው ኮድ ውስጥ የ css3 ትርጉሙ የመጀመሪያው ዓይነት የ “p” የሕፃን ንጥረ ነገር ነው ፣ እዚህ ላይ ከላይ ከተጠቀሱት ሁለት መራጮች መካከል ያለው ልዩነት ተጓዳኝ ዓይነት መጀመሪያ መገኘቱን እና ከዛም ከአይነቱ ጋር የሚዛመድ የመጀመሪያው አካል መገኘቱ ነው ፡፡ . ስለዚህ የተመረጡት p1 እና p3 ናቸው ፡፡ ሁለቱም p1 እና p3 በወላጅ መያዣ ውስጥ የመጀመሪያዎቹ “ፒ” አካላት ናቸው ፡፡