CSS Selectors. селекторлор түрлөрү

CSS документтин көрүнүшүн сүрөттөгөн тили тынымсыз өнүгүп жатат. Убакыттын өтүшү менен, бир гана күчүн жана мүмкүнчүлүгүн эмес, көбөйтүү, ошондой эле пайдалануу ийкемдүүлүгүн жана эс жогорулатат.

CSS селекторлор

Биз түшүнө баштайт. бардык CSS куралы ачып, аны жок дегенде бир бөлүм селекторлорун түрлөрү арналган. Алар мазмун барактардын баарын башкара абдан ыңгайлуу ыкмаларынын бири болуп саналат, бул калыштуу эмес. Алардын жардамы менен, сиз, эч бир HTML элементтер менен баарлаша аласыз. Азыр селекторлорун 7 түрү бар:

• тегдерге;

• класстар үчүн;

• ID үчүн;

• жалпы;

• касиет;

• жасалма-класстар менен жооп берүүгө;

• жасалма кармоо үчүн өтө зарыл.

синтаксистик жөнөкөй. кантип колдонуу керектигин билүү үчүн , CSS селекторлор , алар тууралуу жетиштүү окуп берди. Кайсы параметр учурда мазмунду контролдоо үчүн жакшы? түшүнүүгө аракет кыл.

селекторлор теги

Бул жазуу үчүн атайын билимди талап кылбайт абдан жөнөкөй чыгаруу болуп саналат. теги башкаруу үчүн, сен алардын ысмын колдонуу керек. "Капкак" Сенин сайт тег оролуп жатат <баш> дейли. CSS аны көзөмөлдөө үчүн баш {} селектор колдонушубуз керек.

Артыкчылыгы - пайдалануу каттого, ар тараптуулугу.

Кемчиликтери - ийкемдүүлүгү толук жоктугу. Мисалы, жогоруда бардык теги баш жолу тандалып алынат. Бирок, кандай болсо, жалгыз гана бир башкаруу үчүн керек?

селекторлору

таралган Variant. атрибуттуу тобу менен теги башкаруу үчүн арналган. Дейли, кодду, сиз белгилүү бир түс бериш үчүн келет, алардын ар бири, үч блок <бөлүү> бар. Муну кандай жасаш керек? Стандарттык CSS селекторлор Tags ылайыктуу эмес, алар дароо эле бардык блоктору боюнча параметрлерин көрсөтүп турат. чечим жөнөкөй. класс мүчөлөрүн дайындоо. Мисалы, биринчи класска бөлүү = "кызыл", экинчи алды - класс = "көк", үчүнчү - класс = 'жашыл'. Эми алар CSS үстөлдөрүн аркылуу тандап алса болот.

синтаксиси төмөнкүдөй: тобунун атын жазуу Кийинкиси бир ойду ( "."), белгилейт. биринчи бөлүгүн башкаруу үчүн даярдоосун куруу колдонушат. Экинчиден - ж.б.у.с. .blue.

Маанилүү! Ал класс сыпаты менен маанилүү баалуулуктарды пайдалануу сунуш кылынат. тилиндеги (мисалы, krasiviy-блок) же тамгалар / сандардын кокустан биригип (ojfh834871) пайдалануу үчүн, ал эми жаман түрү болуп эсептелет. ушул Кодексте, сиз түшүнбөй алууга байланыштуу, сизге кийин долбоорго катышып турган адамдарга кыйынчылыктарды сөз үчүн эмес. жакшы ыкмалардан - мисалы, BEM кандайдыр бир методологияны колдонуу.

Артыкчылыгы - салыштырмалуу жогорку ийкемдүүлүгү.

Кемчиликтери - бир нече элементтер, алар бир эле учурда түзөтүү мүмкүн деп билдирет бир эле класс, болушу мүмкүн. көйгөй preprocessors методикасын, ошондой эле мурас аркылуу чечилет. Сиздин колу аз, SASS же башка preprocessor алуу үчүн шектенбесек болот, алар абдан ишин жөнөкөйлөтүү.

ID тандагыч

Бул нускадагы тууралуу пикир берүү жана программисттер бир жактуу болуп саналат. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. туура эмес колдонуу, алар мурас менен байланыштуу көйгөйлөргө алып келиши мүмкүн, анткени кээ бир CSS дарстары, ID пайдаланууну сунуш кылышкан эмес. Бирок көптөгөн эксперттер жигердүү жайгашууда аларды уюштуруу болуп саналат. Сиз чечет. # »), затем имя блока. синтаксиси төмөнкүдөй: фунт белги ( "#"), андан кийин блок атын. #red. Мисалы, #red.

отличается от класса по нескольким параметрам. ID ар кандай жолдор менен класстын айырмаланып турат. ID. Биринчиден, бет, эки бирдей ID болушу мүмкүн эмес. Алар өзгөчө ат берилет. Экинчиден, мындай тандагыч жогорку артыкчылыкка ээ. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Бул бир бүтүн классты кызыл жана CSS стол кызыл көрсөтүү көрсөтүү зарыл болсо, дегенди билдирет арткы түсүн, ачык көк, андан кийин ага бир ID дайындайт жана көк түсү, тактап бирдиги көк болот.

Артыкчылыгы - сен Tags жана класстардын образын эске албай, белгилүү бир элементти көзөмөлдөй аласыз.

ID и class. Кемчиликтери - жеңил ID жана классынын көп сандагы жоголуп кетишин.

Маанилүү! ID вам, в общем-то, не нужны. Сиз BEM ыкманы (же анын окшош) колдонуп жаткан болсо, сага ID, жалпысынан алганда, эч кандай зарылдыгы жок. Бул ыкма бир топ ыңгайлуу жайгашуусу уникалдуу класстардын пайдаланууну билдирет.

жалпы селекторду

{}. Синтаксиси: Starlets белгиси ( "") жана кашаалар, башкача айтканда, {*} ...

кээ бир сыпаттары бир бетине бардык элементтерин энчилегенге колдонулат. Бул пайдалуу болушу мүмкүн? box-sizing: border-box. Мисалы, сиз бет мүлк кутуча-өлчөмдү коюп келсе: чек-абз. div *{}. документ гана бардык компоненттерин башкаруу үчүн пайдаланылышы мүмкүн эмес, ошондой эле, мисалы, көрсөтүлгөн блогунун бардык балдарды көзөмөлдөө, бөлүү * {}.

Артыкчылыгы - Сиз учурда заттар көп санын иреттей аласыз.

Cons - жетишерлик ийкемдүүлүк менен мүмкүн эмес. Мындан тышкары, ушул селектор колдонуу, кээ бир учурларда бет ишине бут тосууда.

өзгөчөлүктөрү менен

Ал белгилүү бир сыпаты менен элементин көзөмөлдөөгө мүмкүнчүлүк берет. Мисалы, башка бир өзгөчөлүгү түрү менен киргизүү Tags бир катар бар. Алардын бири - текст, экинчиси - сөз, үчүнчү - саны. Албетте, ар бир класска же ID орното аласыз, бирок ал дайыма ыңгайлуу эмес. сыпаттарынын CSS селекторлор аны жогорку тактык менен бир тэгдер баалуулуктарын көрсөтүү үчүн мүмкүнчүлүк берет. Мисалы, мындай:

киргизүү [түрү = 'текст'] {}

Бул селектор киргизүү тексти түрү менен бардык сыпаттарын тандап алат.

курал абдан ийкемдүү жана сыпаттары бар болушу мүмкүн тегдеринин болбосун менен колдонулушу мүмкүн. Бирок, баары эмес! CSS өзгөчөлүгү дагы да чакырык менен элементтерди көзөмөлдөө мүмкүнчүлүгү бар!

Imagine сиздин барак бар атрибуттуу орду менен салымын бар экенин = жана киргизүү орду "деген атын," = "сөздү Enter". Алар ошондой эле селектор аркылуу тандап алса болот! Бул үчүн төмөнкү түзүмүн колдонот:

киргизүү [орду = "атын"] {} же киргизүү [орду = "сөздү Enter"]

өзгөчөлүктөрү менен, балким, дагы да ийкемдүү иш. Сиз сыяктуу сыпаттары аталышы (мисалы, "Каспий" жана "Каспий") менен Tags бир катар бар дейли. экөө тең тандоо үчүн төмөнкү тандоолорду колдонуп:

[Аталышы * = "Бишкек"]

CSS "Каспий", башкача айтканда. Э.А., Ал эми, "Каспий" жана "Каспий" деген белгилер бар, алардын аталышы бардык ден болуп тандап алат.

Ошондой эле бир тамга белгилери башталат теги тандай аласыз:

[Бойунча ^ = "Сиз каалаган тамга"] {}

же аларды токтотулат:

[Бойунча $ = "оң каарман"] {}.

Артыкчылыгы - максималдуу ийкемдүү. Сиз класстар менен баспагыла эч кандай колдонулуп жаткан бет элементтерди тандап алат.

Кемчиликтери - салыштырмалуу сейрек колдонулган, өзгөчө учурларда. пункту класс көптөгөн уюштуруу караганда кыйын болгондуктан, көптөр интернет дизайнерлер, методологиясы артык бурчтуу кашаа "бирдей" жана жышаандарды. Мындан тышкары, бул селекторлор Internet Explorer котормолордо иш эмес, 7 жана төмөндө. Бирок, азыр эски Internet Explorer муктаж ким?

Pseudo-Class Selectors

жасалма Статус элементи билдирет. Анткени, мисалы ,: тамдын - Сиз калкып беттеги бөлүгү эмне ,: болушту - барган шилтемени. биринчи жана баланын: акыркы балага Ошондой эле сыяктуу элементтерди камтыйт.

аны сиз JavaScript пайдалануу бир бет "тирүү" алат рахмат, себеби селектор бул түрү, жигердүү заманбап жайгашууда колдонулат. Мисалы, анын түсүн өзгөртүп баскыч классына менен баскычы үстүнө курсорду жатканда сак болушу керек. Бул үчүн биз төмөнкү түзүмүн колдонот:

.btn: үстүнө {

маалымат-түсү: кызыл;

}

Сулуулук баскычынын негизги өзгөчөлүктөрү менен аныкталышы мүмкүн, өткөөл мүлктү, мисалы, 0.5s - бул учурда, баскычын замат такыр уялышпайт, жок кылат, жарым секунданын ичинде.

Virtues - көп беттен турган "калыбына келтирүү" үчүн колдонулат. колдонуу үчүн жеңил.

Кемчиликтери - алар эмес. Бул, чынында эле, ырдай куралы болуп саналат. Бирок, тажрыйбасыз желе дизайнерлери жасалма-класстардын көп жоголуп кетиши ыктымал. көйгөй изилдөө жана тажрыйбасын чечилет.

жасалма селекторлор

"Жасалма" - бул HTML-жылы эмес, бетине бир бөлүгү болуп саналат, бирок алар дагы эле башкарса болот. Сен түшүнгөн эмес? Ал, сыягы, кыйла кыйын болот. Мисалы, башка чакан жана кара текст таштап, сап-жылы биринчи каты чоң жана кызыл кылып келет. Албетте, белгилүү бир класстын бир карыш ушул катты түзүлүшү мүмкүн, бирок, бул узун жана кызыксыз. Бул толугу менен пунктту тандап, жасалма колдонуу деле турбайт :: биринчи кат. Бул биринчи катында көрүнүшүн көзөмөлдөөгө мүмкүнчүлүк берет.

жасалма-элементтерге кыйла көп саны бар. бир макалада алардын тизмесин ийгиликке күмөн. Сиз сүйүктүү издөө тийиштүү маалыматтарды таба аласыз.

Артыкчылыгы - беттин көрүнүшүн жекечелендирүү ийкемдүүлүктү камсыз кылат.

Кемчиликтери - алар үчүн жаңы көп учурда аз. гана бир браузерлерди иштин бул түрү көптөгөн шайлоолор.

Кыскасы

Тандагыч - документ агымын контролдоо үчүн күчтүү курал. Анын жардамы менен, сиз барактын ар бир компонентин тандап алса болот (ал тургай, жарым-жартылай гана бар). колдо болгон бардык мүмкүнчүлүктөрдү билүү үчүн шектенбесек болот, ал тургай, аларды жаз. Бул өз ара элементтердин заманбап дизайны менен комплекстүү барактарды жана түзө болсо өзгөчө маанилүү болуп саналат.