ብዙ ሰዎች የሚያውቁት ይመስለኛል በሲኤስኤስ ውስጥ የአውድ መራጮች. ብዙውን ጊዜ ጥቅም ላይ ይውላሉ, ሆኖም ግን, ልምድ ያላቸው የአቀማመጥ ንድፍ አውጪዎች አንዳንድ ጊዜ የአውድ መራጮች አንዳንድ ችግሮችን እንደሚያስተዋውቁ ያውቃሉ. ይህ ችግር በአንድ ኤለመንት መዋቅር ውስጥ እርስ በርስ የተያያዙ ብዙ ተመሳሳይ ንጥረ ነገሮች ሊኖሩ ስለሚችሉ ነው. እና ዘይቤውን በሁሉም የጎጆ አካላት ላይ ሳይሆን በቅርብ የልጅ አካል ላይ ብቻ መተግበር ያስፈልግዎታል። የሚገለገሉበት ይህ ነው። በሲኤስኤስ ውስጥ የልጆች መራጮች.

ችግሩን የበለጠ ግልጽ ለማድረግ, ትንሽ ምሳሌ እንስጥ. እንደዚህ አይነት ይኑረን HTML ኮድ:

የእኛ ተግባር ቀይ ማድረግ ብቻ ነው" ሁለተኛ አንቀጽ" አውድ መራጭን ተጠቅመን ከጻፍን፡-

መያዣ ፒ (
ቀለም: ቀይ;
}

ከዚያ ሁለቱም አንቀጾች ወደ ቀይ ይለወጣሉ, እኛ ምንም አያስፈልገንም. ይህን ችግር በመጠቀም በጣም በቀላሉ ሊፈታ ይችላል በሲኤስኤስ ውስጥ የልጆች መራጮች:

መያዣ > ፒ (
ቀለም: ቀይ;
}

ያ ነው አሁን ቀይ ብቻ ነው ያለን" ሁለተኛ አንቀጽ". ይህ የተለየ አንቀጽ ቀጥተኛ ልጅ ስለሆነ .መያዣ. ሀ" የመጀመሪያ አንቀጽ"የውስጥ ልጅ ነው። divስለዚህ, በልጁ መራጭ አይነካም.

እንደዚህ ያሉ ችግሮች በቀላሉ የሚፈቱት በዚህ መንገድ ነው, ሆኖም ግን, አንድ ትልቅ ኪሳራ አለ በሲኤስኤስ ውስጥ የልጆች መራጮች- በአሳሾች ውስጥ አይሰሩም ኢንተርኔት ኤክስፕሎረር. በዚህ ምክንያት, የእነሱ ጥቅም በጣም የማይፈለግ ነው. ነገር ግን በድንገት የሆነ ቦታ ካጋጠሙዎት, አሁን የዚህ አይነት መራጭ ምን ማለት እንደሆነ እና ምን እንደሚሰራ ያውቃሉ.

ሰላም, ውድ አንባቢዎች! የሲኤስኤስ መምረጫዎችን ርዕስ በመቀጠል, ወደ እርስዎ ትኩረት ማምጣት እፈልጋለሁ የልጅ እና የአውድ መራጮች መግለጫ, እንዲሁም የእነሱ የንጽጽር ትንተና, በአተገባበሩ አመክንዮ መሰረት እነሱ በጣም ተመሳሳይ ናቸው, ምንም እንኳን አንዳንድ ልዩነቶች ቢኖራቸውም.

በህትመቶቼ ውስጥ በተለያዩ የ CSS መራጮች ላይ በዝርዝር ተቀመጥኩ፡; እና . በነገራችን ላይ ባለፈው መጣጥፍ ላይ የተለያዩ አይነት ባህሪ መራጮችን በተመለከትኩበት፣ አብሮ የተሰራውን የጎግል ክሮም መሳሪያ በመጠቀም በመስመር ላይ በኤችቲኤምኤል እና በሲኤስኤስ ኮድ ላይ ለውጦችን በማድረግ የንድፈ ሃሳቦቼን ስሌት እንዴት ወዲያውኑ መሞከር እንደሚቻል በዝርዝር ገልጫለሁ። () እንደነዚህ ያሉ የአርትዖት መሳሪያዎች የፋየርቡግ ፕለጊን ለፋየርፎክስ ()ን ጨምሮ የሁሉም ታዋቂ አሳሾች የቅርብ ጊዜ ማሻሻያዎች አሏቸው።

እንዲሁም በማንኛውም ድህረ ገጽ ላይ ማንኛውንም ገጽ በማስተካከል በዚህ ጽሑፍ ውስጥ ያለውን የቲዎሬቲክ ቁሳቁስ ማጥናት ይችላሉ! ይህንን ለማድረግ ጎግል ክሮምን ወይም ሞዚላ ፋየርፎክስን () እየተጠቀሙ ከሆነ በቀላሉ F12 ን ይጫኑ። አሁን የ p tag ይዘቶችን አቀርባለሁ, ይህም እንደ ምሳሌ እናጠናለን ልጅ እና ዐውደ-ጽሑፍ CSS መራጮች:

ይህ አንቀጽ ያካትታል em እና ጠንካራ የቅርጸት መለያዎችየሚያደምቀው ጽሑፍ ደፋርእና ሰያፍ.

ከዚህ በላይ የተገለጸውን የአርትዖት መሣሪያ በመጠቀም ይህንን አንቀጽ በቀጥታ ወደዚህ ጽሑፍ አስገባሁ፣ በአርትዖት መስኮቱ በግራ በኩል ተገቢውን ጽሑፍ አስገባሁ፣ በዚህም ምክንያት የዚህ አንቀጽ ጽሑፍ በገጹ አናት ላይ ታየ።

ይህ HTML ግንባታ፣ ይህ አንቀጽ በዛሬው ሕትመት ውስጥ የሙከራ ርዕሰ ጉዳይ ይሆናል, እኔ የእሱን ጽሑፍ ንድፍ እንዴት እንደሚቀየር ያሳያል, የትኛው መራጮች ላይ በመመስረት - ልጅ ወይም አውድ - በ CSS ደንብ ውስጥ ጥቅም ላይ ይውላሉ.

የሕፃን አካል በቀጥታ በወላጁ ውስጥ የሚገኝ አካል ነው።. በቀጥታ ወደ ርእሱ ከመሄዴ በፊት በኤችቲኤምኤል ሰነድ ውስጥ ያሉትን የመለያዎች ተዋረድ የሚያንፀባርቅ ሥዕል እሰጣለሁ ጽሑፉ ከላይ የተሰጠውን እና ዛሬ የምንተነትንበትን አንቀጽ ምሳሌ በመጠቀም።

ይህ ንድፍ ኤለመንት ዛፍ ተብሎም ይጠራል. ይህ አኃዝ የመያዣዎችን መክተፍ በግልፅ ያሳያል፣ይህም በመለያዎች መካከል ተዋረዳዊ ግንኙነቶችን ያሳያል። የአንቀጽ መለያው p ልጅ ነው። በተመሳሳይ ጊዜ, ጠንካራ መለያው በፒ ኮንቴይነር ውስጥ ስለሚገኝ የዲቪው ልጅ አይደለም.

የልጅ CSS መራጭ

በኤለመንቶች ዛፍ ውስጥ ያለ ልጅ መራጭ ሁል ጊዜ በቀጥታ በወላጅ አካል ውስጥ ይገኛል ፣ በዚህ ሁኔታ የ CSS መራጭ ለመፃፍ አገባብ እንደሚከተለው ይሆናል ።

ቅጡ የሚተገበረው በመራጭ 2 ላይ ነው ነገር ግን የመራጭ 1 ልጅ ከሆነ ብቻ ነው ከላይ ያለውን የኤለመንቱን ዛፍ ስክሪን ሾት በመጠቀም በዝርዝር እንመልከተው። ለምሳሌ፣ አገባብ በመከተል፣ ይህን የመሰለ ህግ ማዘጋጀት ይችላሉ፡-

P> em (ቀለም: አረንጓዴ;)

ይህ ደንብ በአንቀጹ የመጨረሻ ቃል ላይ ተጽዕኖ ይኖረዋል "ኢታሊክዲዝ" ነው, ምክንያቱም ይህ በመክፈቻ እና በመዝጊያ em መለያዎች መካከል ያለው ነው. em tag የፒ ልጅ ነው ምክንያቱም በቀጥታ በውስጡ ስለተቀመጠ የይዘቱ ጽሁፍ ማለትም "ኢታሊክ" የሚለው ቃል አረንጓዴ ቀለም ይኖረዋል.

ነገር ግን፣ ሌላኛው em tag የጠንካራ መለያ አካል ስለሆነ የፒ ታግ ቀጥተኛ ዘር አይደለም፣ በዚህም ምክንያት የአንቀጹ "em and strong formatting tags" ክፍል ቀለም አይቀባም።

አውዳዊ CSS መራጭ

እሱን ለማወቅ ጊዜው አሁን ነው። የሲኤስኤስ አውድ መራጭ ምንድነው?. በድር ጣቢያ ላይ አንድ የተወሰነ ገጽ ሲዘረጉ ፣ መለያዎች ብዙውን ጊዜ አንዱ በሌላው ውስጥ ይሰበሰባሉ። ቅጦች ለእንደዚህ ዓይነቶቹ አካላት በትክክል እንዲሠሩ ፣ በአንዳንድ አውድ ውስጥ የሚሰሩ መራጮች ጥቅም ላይ ይውላሉ ፣ ስለሆነም ስሙ።

የ CSS ደንብ ተግባራዊ ለማድረግ ልጅ መራጩ በቀጥታ በወላጅ አካል ውስጥ መቀመጥ አለበት (የመጀመሪያው ጎጆ ደረጃ) ፣ ከዚያ ለአውድ መራጭ ይህ ሙሉ በሙሉ አስፈላጊ አይደለም እና ማንኛውም የጎጆ ደረጃ ሊተገበር ይችላል ፣ ኤለመንቱ አሁንም ከወላጅ ይተላለፋል። አገባቡ ይህ ነው፡-

እንደምታየው፣ አውድ መራጭ በቦታ የተለዩ ቀላል መራጮችን ያካትታል። ለዐውደ-ጽሑፍ መራጮች፣ ሁለት ወይም ከዚያ በላይ የጎጆ መለያዎችን መጠቀም ተፈቅዶለታል። አሁን ከላይ ለጠቀስኩት በፈተና ላይ ላለው አንቀፅ የCSS ደንብ እንፍጠር፡-

ፒ (ቀለም: አረንጓዴ;)

እንደሚመለከቱት ፣ በ em ቅርጸት መለያ ውስጥ በቀጥታ የተዘጋው የአንቀጹ ይዘት ክፍል ጽሑፍ ፣ ማለትም ፣ “ኢታላይዝድ” የሚለው ቃል አረንጓዴ ቀለም ያለው ብቻ ሳይሆን የሌላ em መለያ ጽሑፍ ክፍልም ጭምር ነው። , እሱም ደግሞ የጠንካራ መለያ አካል ነው. ይህ የሆነበት ምክንያት ከአውድ መራጭ ጋር አንድ ደንብ ስላለ ነው, ለዚህም እንደ ህጻን መራጭ በተለየ የጎጆው ደረጃ አስፈላጊ አይደለም. ይህ በልጁ እና በአውድ መራጭ መካከል ያለው መሠረታዊ ልዩነት ነው።

ዐውደ-ጽሑፍ እና ልጅ መራጮች ከኛ አንቀፅ ጋር እንዴት እንደሚገናኙ ሌላ ምሳሌ እንመልከት። ለልጁ እና አውድ መራጭ የሚከተሉትን የሲኤስኤስ ህጎች እንፃፍ፡-

Div em (ቀለም: ቀይ;) p> em (ቀለም: አረንጓዴ;)

ከዚህ በኋላ የእኛ አንቀፅ የሚከተለውን ንድፍ ይይዛል-

እንደሚመለከቱት ፣ በ em እና በጠንካራ መለያዎች ውስጥ የታሸገ የጽሑፍ ቁራጭ ቀይ ቀለም አለው ምክንያቱም የአውድ መራጭ ደንቡ ለእሱ የሚሰራ ነው ፣ ማለትም ፣ em tag በጠንካራ እና በዲቪ ኮንቴይነሮች ውስጥ ፣ እና የጎጆው ደረጃ ቀደም ሲል እንደተገለፀው ፣ ምንም ችግር የለም ።

ጥያቄው የሚነሳው ለምንድነው "ኢታላይዝድ" የሚለው ቃል ለምንድ ነው, እሱም የ em ይዘት, አረንጓዴ ቀለም ያለው? ደግሞም የአውድ መራጭ ህግ ለእሱም ጠቃሚ ነው። ነገር ግን ለዚህ የአንቀፅ ጽሁፍ ክፍል የህፃናት መራጭ ህግም ልክ ነው, ምክንያቱም ለህፃናት መራጭ, ንጥረ ነገሩ በቀጥታ በ p tag ውስጥ መካተት ያለበትን ሁኔታ ስለማይቃረን ነው.

እውነታው ግን በሲኤስኤስ ውስጥ ከዚህ በታች ለተቀመጡት የ CSS ንብረቶች ቅድሚያ የሚሰጠው ህግ አለ. ያም ማለት በዚህ ጉዳይ ላይ የሕፃን መምረጫ ህግ በሰነዱ ውስጥ ከሲኤስኤስ ቅጦች ያነሰ ለዲቪ ኮንቴይነሩ አውድ መራጭ ከተጠቀሰው ያነሰ ነው. ስለዚህ "ኢታሊክ" የሚለው ቃል አረንጓዴ ሆነ. ከቀያይሯቸው፣ ከዚያ “p> em (ቀለም፡ አረንጓዴ፤)” ህግ ከእንግዲህ አይተገበርም እና የጽሑፉ “ኢታሊክ” ክፍል ቀይ ይሆናል።