የሲ Selectors. selectors አይነቶች

, አንድ የተወሰነ ቀለም ማዘጋጀት ይፈልጋሉ እያንዳንዱ ነው. እንዴት ማድረግ? መደበኛ የሲ selectors እነሱም በአንድ ጊዜ በሁሉም ብሎኮች የሚሆን መለኪያዎች ያመለክታሉ, መለያዎች ተስማሚ አይደሉም. መፍትሔው ቀላል ነው. ክፍል አባላት መድብ. ክፍል = 'ሰማያዊ', ሦስተኛ - - class = 'አረንጓዴ' ለምሳሌ ያህል, በመጀመሪያው 'ቀይ' ሁለተኛ = div class ተቀበሉ. አሁን የሲ ጠረጴዛዎች በመጠቀም መመረጥ ይችላሉ.

የ አገባብ እንደሚከተለው ነው: ክፍል ስም በመጻፍ የሚከተሏቸው አንድ ነጥብ ( "."), ያመላክታል. የመጀመሪያው አሃድ ለማስተዳደር, .red ግንባታ ይጠቀሙ. ሁለተኛ - በጣም ላይ .blue እና.

አስፈላጊ! ይህ ክፍል አይነታ ውስጥ ትርጉም ያለው እሴቶች መጠቀም ይመከራል. እሱም በቋንቋ ፊደል (ለምሳሌ, krasiviy-blok) ወይም ፊደላት / ቁጥሮች የዘፈቀደ ጥምረት (ojfh834871) መጠቀም መጥፎ ቅጽ ተደርጎ ነው. ይህን ኮድ ውስጥ እርስዎ በኋላ ፕሮጀክት ውስጥ ተሳታፊ ይሆናል ሰዎች ፊት ለፊት መሆኑን ችግሮች መጥቀስ ሳይሆን, ግራ ለማግኘት የማይቀር ነው. የተሻለው አማራጭ - እንደ BEM እንደ ማንኛውንም ዘዴ መጠቀም.

ጥቅሞች - በአንጻራዊ ሁኔታ ከፍተኛ የመተጣጠፍ.

ጥቅምና - የ በርካታ ንጥረ ነገሮች አንዱ እና እነርሱ በአንድ አርትዖት ይሆናል ማለት ነው ይህም ተመሳሳይ ክፍል ሊሆን ይችላል. ችግሩ preprocessors መካከል ዘዴው እንዲሁም ርስት በመጠቀም መፍትሔ ነው. እጅግም ሥራ ለማቃለል, sass ወይም ሌላ preprocessor, የእርስዎን እጅ ያነሰ ለማግኘት እርግጠኛ ይሁኑ.

መታወቂያ መራጭ

በዚህ ስሪት በተመለከተ አስተያየት coders እና ፈርጋሚዎች አሻሚ ናቸው. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. ትክክለኛ ያልሆነ መተግበሪያ ውስጥ እነሱ ርስት ጋር ችግር ሊፈጥር ይችላል; ምክንያቱም አንዳንዶቹ የሲ የማጠናከሪያ, መታወቂያ መጠቀምን እንመክራለን. ይሁን እንጂ በርካታ ባለሙያዎች በንቃት ናቸው አቀማመጥ በመላው ከእነርሱ ዝግጅት. እርስዎ ይወስኑ. # »), затем имя блока. ምናኑን ምልክት ( "#"), ስለ ጥምር ከዚያም ስም: አገባብ እንደሚከተለው ነው. #red. ለምሳሌ ያህል, #red.

отличается от класса по нескольким параметрам. መታወቂያ በተለያዩ መንገዶች ክፍል የተለየ ነው. ID. በመጀመሪያ, ገጹን ሁለት ተመሳሳይ መታወቂያ ሊሆን አይችልም. እነዚህ ልዩ ስም ይመደባሉ. በሁለተኛ ደረጃ, እንዲህ ያለ መራጭ ከፍ ያለ ቅድሚያ አለው. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. ይህ ቀይ አሃድ ክፍል ይጥቀሱ እና CSS ጠረጴዛዎች ላይ ቀይ ይጥቀሱ ከሆነ ማለት ጀርባ ቀለም, ከዚያም ሰማያዊ በሱ ላይ ተመሳሳይ መታወቂያ መመደብ እና ሰማያዊ ቀለም መግለጽ, ክፍሉም ሰማያዊ ይመልሳል.

ጥቅሞች - አንተ መለያዎች እና ክፍሎች መካከል ቅጦችን ችላ ማለት, የተወሰነ አባል መቆጣጠር ይችላሉ.

ID и class. ጥቅምና - ቀላል መታወቂያ እና መደብ ብዙ ቁጥር ውስጥ የጠፉ ለማግኘት.

አስፈላጊ! ID вам, в общем-то, не нужны. ለእርስዎ BEM ዘዴ (ወይም analogues), መታወቂያ እየተጠቀሙ ከሆነ, በአጠቃላይ, አስፈላጊ አይደለም. ይህ ዘዴ አቀማመጥ ልዩ ክፍሎች ብዙ ይበልጥ አመቺ መጠቀምን ያካትታል.

ሁለንተናዊ መራጭ

{}. የአገባብ: Starlets ምልክት ( "*") ለማጠናከሪያ, ማለትም, {*} ...

አንዳንድ በአንድ ባህሪያት የገጹን ሁሉንም ክፍሎች ለመመደብ ተጠቅሟል. ይህ ጠቃሚ ሊሆን የሚችለው መቼ ነው? box-sizing: border-box. ለምሳሌ ያህል, አንተ ገጹን ንብረት ሳጥን-የመጠን ለማዘጋጀት የሚፈልጉ ከሆነ: ድንበር-ሳጥን. div *{}. ብቻ ሰነድ ሁሉ አካሎች, ለማስተዳደር ጥቅም ላይ ሊውል አይችልም ነገር ግን ደግሞ ለምሳሌ በተጠቀሰው የማገጃ ልጆች ሁሉ, ለመቆጣጠር, div * {}.

ጥቅሞች - በአንድ ጊዜ ንጥሎች ከፍተኛ ቁጥር መቆጣጠር ይችላሉ.

ጉዳቱን - በቂ አይደለም ተጣጣፊ አማራጭ. በተጨማሪም, ይህ መራጭ መጠቀም, በአንዳንድ ሁኔታዎች ውስጥ ገጹን ሥራ ፍጥነትዎን.

ባህሪያት በ

የሚቻል አንድ የተወሰነ አይነታ ጋር ኤለመንት ለመቆጣጠር አድርግ. ለምሳሌ ያህል, አንድ የተለየ አይነታ አይነት ጋር ግብዓት መለያዎች በርካታ አላቸው. ከእነርሱ መካከል አንዱ - ጽሑፍ, ሁለተኛው - የይለፍ ቃል, ሦስተኛ - ቁጥር. እርግጥ ነው, እያንዳንዱ ክፍል ወይም መታወቂያ ማዘጋጀት ይችላሉ, ነገር ግን ሁልጊዜ አመቺ አይደለም. ባህሪያት መካከል CSS selectors የሚቻል ከፍተኛ ትክክለኝነት ጋር የተወሰኑ መለያዎች እሴቶች እንዲገልጹ ማድረግ. ለምሳሌ ያህል, እንዲህ ዓይነት:

የግቤት [አይነት = 'ጽሑፍ »] {}

ይህ መምረጫ ግብዓት ጽሑፍ አይነት ጋር ሁሉንም ባህሪዎች መምረጥ ይሆናል.

ወደ መሳሪያ በጣም ተለዋዋጭ ነው እና ባህሪዎች ሊኖር ይችላል ውስጥ መለያዎችን, ማንኛውም ጋር መጠቀም ይቻላል. ነገር ግን ሁሉም አይደለም! የ CSS ዝርዝር ይበልጥ ምቾት ጋር ንጥረ የመቆጣጠር ችሎታ አለው!

"አንድ ስም ያስገቡ" እና የግቤት ያዥ = "የይለፍ ቃል ያስገቡ" = የእርስዎ ገጽ አይነታ ያዥ ጋር ግብዓት አለው እንበል. በተጨማሪም የ መራጭ በመጠቀም መመረጥ ይችላል! ይህን ለማድረግ የሚከተሉትን መዋቅር ይጠቀሙ:

የግቤት [ያዥ = "ስም ያስገቡ"] {} ወይም ግብዓት [ያዥ = "የይለፍ ቃል ያስገቡ"]

ባሕርያት ጋር ምናልባት ይበልጥ ፈታ ሥራ. የአምላክ አንተም ተመሳሳይ መገለጫዎች አርዕስት (ለምሳሌ, «በካስፒያን" እና "በካስፒያን") ጋር መለያዎች በርካታ አለህ እንበል. ሁለቱም ለመምረጥ, የሚከተሉትን ምርጫዎችን ይጠቀሙ:

[ርዕስ * = "Kaspiysk"]

የሲ "በካስፒያን" ማለትም. ኢ, እና "በካስፒያን" እና "በካስፒያን" መካከል ምልክቶች አሉ የትኛው ርዕስ ውስጥ ሁሉንም ንጥሎች ይመርጣል.

በተጨማሪም አንድ ገጸ ባሕርያት ጋር ይጀምራሉ እንደሆነ መለያዎችን መምረጥ ይችላሉ:

[ርዕስ ^ = "ቁምፊ የምትፈልገውን"] {}

ወይም ማቋረጥ:

[ርዕስ $ = "ቀኝ ቁምፊ"] {}.

ጥቅሞች - ከፍተኛው የመተጣጠፍ. የ ክፍሎች ጋር መዝረክረክ ያለ ማንኛውም ነባር የገጽ አባሎችን መምረጥ ይችላሉ.

ጥቅምና - ብቻ የተወሰኑ ሁኔታዎች ውስጥ, በአንጻራዊ ሁኔታ አልፎ አልፎ ነበር. ነጥብ ክፍል በርካታ ዝግጅት ይልቅ ቀላል ስለሆነ ብዙ የድር ንድፍ, ዘዴው እመርጣለሁ ካሬ ቅንፍ "እኩል" እና ምልክቶች. በተጨማሪ, እነዚህ selectors ኢንተርኔት ኤክስፕሎረር ስሪቶች 7 እና ከታች ውስጥ አይሰሩም. ይሁን እንጂ አሁን አሮጌውን ኢንተርኔት ኤክስፕሎረር የሚያስፈልጋቸው ናቸው?

ሃሳዊ-ክፍል selectors

አንድ ሃሳዊ-ሁኔታ ንጥረ ያመለክታል. ለምሳሌ ,: ማንዣበብ ያህል - እርስዎ ያንዣብቡ ጊዜ ገጹ ክፍል ላይ ምን እንደተፈጠረ ,: የተጎበኙ - የ የተጎበኙ አገናኝ. በመጀመሪያ-ልጅ ሲሆን: ባለፈው-ልጅ በተጨማሪም እንደ ክፍሎችን ያካትታል.

ይህም ምስጋና ጃቫስክሪፕትን መጠቀም ያለ አንድ ገጽ "በቀጥታ" ማድረግ ይችላል; ምክንያቱም መራጭ ይህ አይነት በንቃት, ዘመናዊ አቀማመጥ ላይ ውሏል. ለምሳሌ ያህል, አንተ በውስጡ ቀለም ተለውጧል btn መካከል ያለውን ክፍል ጋር ያለውን አዝራር ላይ ሲያንዣብቡ መሆኑን ማረጋገጥ እንፈልጋለን. ይህን ለማድረግ, የሚከተለውን መዋቅር ይጠቀሙ:

.btn: ማንዣበብ {

የጀርባ-ቀለም: ቀይ;

}

በዚህ ሁኔታ ውስጥ, ወደ አዝራር ወዲያውኑ ሲቀላ አይደለም, እና ግማሽ ሁለተኛ ውስጥ - የውበት ለምሳሌ ያህል, 0.5s, አዝራሩን, የሽግግር ንብረት መሰረታዊ ባህርያት ውስጥ ሊገለጹ ይችላሉ.

በጎነት - በሰፊው ገጾች "መነቃቃት" ጥቅም ላይ ይውላሉ. ለመጠቀም ቀላል.

ጥቅምና - እነሱ አይደሉም. ይህ በጣም ምቹ መሣሪያ ነው. ይሁን እንጂ, ተላላ የድር ዲዛይነሮች ሃሳዊ-መደቦች ብዛት ላይ ያጡ ማግኘት ይችላሉ. ችግሩ ጥናት እና ልምምድ መፍትሔ ነው.

ሃሳዊ-selectors

"ሀሣዊ" - እነዚህ ኤችቲኤምኤል ውስጥ ያልሆኑ ከገጹ ክፍሎች ናቸው, ነገር ግን እነሱ አሁንም ሊደራጅ ይችላል. አንተ መረዳት ነበር? ይህ ይመስላል ይልቅ በጣም ቀላል ነው. ለምሳሌ ያህል, አንተ በሌላ አነስተኛ እና ጥቁር ጽሑፍ በመተው, ወደ ሕብረቁምፊ ውስጥ የመጀመሪያ ፊደል ትልቅ እና ቀይ እንዲሆን እንፈልጋለን. እርግጥ ነው, አንድ የተወሰነ ክፍል ጋር አንድ ስንዝር ውስጥ ይህ ደብዳቤ ሲደመድም ሊሆን ይችላል, ነገር ግን ረጅም እና አሰልቺ ነው. ይህም መላውን አንቀጽ ይምረጡ እና ሃሳዊ :: የመጀመሪያ ፊደል ለመጠቀም በጣም ቀላል ነው. ይህ የመጀመሪያው ደብዳቤ መልክ ለመቆጣጠር የሚያስችል አጋጣሚ ይሰጠናል.

ሃሳዊ-ንጥረ ነገሮች በጣም ብዙ ቁጥር አሉ. በአንድ ርዕስ ላይ እነሱን ዘርዝር ስኬታማ ለማድረግ የማይመስል ነገር ነው. የእርስዎን ተወዳጅ የፍለጋ ፕሮግራም ውስጥ ተገቢ መረጃ ማግኘትም ይችላሉ.

ጥቅሞች - የ የገጹን መልክ ለማበጀት ነፃነት ይሰጣሉ.

ጉዳቶች - ለእነርሱ አዲስ ብዙውን ጊዜ ግራ ናቸው. ብቻ በአንዳንድ አሳሾች ውስጥ ሥራ የዚህ አይነት ብዙ ምርጫዎች.

ለማጠቃለል

መምረጫ - ሰነድ ፍሰት ለመቆጣጠር የሚያስችል ኃይል ያለው መሣሪያ. እሱ እናመሰግናለን, በገጹ እያንዳንዱ ነጠላ አካል መምረጥ ይችላሉ (በከፊል ብቻ እንኳ አሉ). የሚገኙ ሁሉም አማራጮች ለማወቅ, ወይም እንዲያውም እነሱን ወደ ታች መጻፍ እርግጠኛ ይሁኑ. እርስዎ ውስብስብ የሆነ ዘመናዊ ንድፍ ጋር ገጾች እና በይነተገናኝ አባላትን ብዙ ለመፍጠር ከሆነ ይህ በተለይ አስፈላጊ ነው.