በ ": 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 በወላጅ መያዣ ውስጥ የመጀመሪያዎቹ “ፒ” አካላት ናቸው ፡፡