CSS селектори. видове селектори

, всяка от които искате да зададете специфичен цвят. Как да го направя? Стандартни CSS селектори не са подходящи за етикети, те посочват параметрите за всички блокове наведнъж. Решението е просто. Присвояване на членовете на групата. Например, първият получените Разделение клас = "червените", второ - клас = "синьо", третата - клас = "зелено". Сега те могат да бъдат избрани с помощта на CSS таблици.

Синтаксисът е както следва: Показва точка ( "."), Следвани от написването на името на класа. За управление на първото устройство, използвайте изграждането .red. Второ - .blue и така нататък.

Важно! Препоръчително е да се използват смислени стойности на атрибута клас. Той се смята за лоша форма да се използва транслитерация (например, krasiviy-блок), или произволни комбинации от букви / цифри (ojfh834871). В този код, вие сте длъжни да се бърка, да не говорим за трудностите, които ще се изправят пред тези, които ще бъдат ангажирани в проекта, след като сте. Най-добрият вариант - да се използва който и да е методология, като BEM.

Предимства - сравнително висока гъвкавост.

Недостатъци - множество елементи могат да бъдат един и същи клас, което означава, че те ще бъдат редактирани едновременно. Проблемът е решен, като се използва методика, както и наследството Препроцесори. Бъдете сигурни, за да получите ръцете си по-малко, дързък или някакъв друг предпроцесорни, те значително се опрости работата.

селектор ID

За тази версия програмисти на общественото мнение и програмисти са двусмислени. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Някои CSS уроци не препоръчват използването на ID, защото в неточно прилагане те могат да причинят проблеми с наследство. Въпреки това, много експерти са активно ги подредите по време на оформлението. Вие решавате. # »), затем имя блока. Синтаксисът е както следва: на знака лира ( "#"), а след това името на блока. #red. Например, # Червена.

отличается от класса по нескольким параметрам. ID е различен от този клас по няколко начина. ID. На първо място, страницата не може да бъде две еднакви ID. Те получават уникален име. На второ място, като селектор има по-висок приоритет. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Това означава, че ако зададете единица клас червено и определи в CSS маси червен цвят на фона, и след това да му възложи и същ идентификационен номер синьо и посочете цвят синьо, устройството ще се оцвети в синьо.

Предимства - можете да контролирате специфичния елемент, игнорирайки стилове на тагове и класове.

ID и class. Недостатъци - лесно да се загубиш в голям брой ID и клас.

Важно! ID вам, в общем-то, не нужны. Ако използвате методология BEM (или неговите аналози), ID за Вас, като цяло, не са необходими. Тази техника включва използването на оформлението на уникални класове, които много по-удобно.

универсален селектор

{}. Синтаксис: знак Starlets ( "*") и скоби, т.е. {*} ...

Използва се да възлага определени атрибути веднъж на всички елементи на страницата. Когато това може да бъде полезен? box-sizing: border-box. Например, ако искате да зададете на страницата имот кутия оразмеряване: граничен кутията. div *{}. Не може да се използва само за да управлявате всички компоненти на документа, но също така и да контролира всички деца на определен блок, например, Разделение * {}.

Предимства - можете да контролирате по-голям брой позиции в даден момент.

Недостатъци - не е достатъчно гъвкав вариант. В допълнение, използването на този селектор, в някои случаи да забави работата на страницата.

по атрибути

Направете възможно да се контролира елемент с определен атрибут. Например, вие имате няколко входни етикети с различен тип атрибут. Един от тях - текст, а вторият - паролата, третата - номер. Разбира се, можете да настроите всеки клас или ID, но това не винаги е удобно. CSS селектори атрибути дават възможност да се уточни стойности на определени маркери с максимална точност. Така например, по следния начин:

вход [тип = 'текст'] {}

Това селектор ще бъдат избрани всички атрибути с вида на въвеждане на текст.

Инструментът е доста гъвкава и може да се използва с всеки от етикетите, в които може да има атрибути. Но това не е всичко! Спецификацията на CSS има способността да контролира елементите с още по-голямо удобство!

Представете си, че вашата страница има вход с заместител на атрибут = "Въведете име" и въвеждане на заместител = "Въведете парола". Те могат също така да бъдат избрани с помощта на селектора! За да направите това, използвайте следната структура:

вход [заместител = "Enter името"] {} или вход [заместител = "въведете паролата"]

Може би по-гъвкава работа с атрибути. Да речем, че имаме редица маркери с подобни атрибути заглавие (например, "Каспийско" и "Каспийско"). За да изберете и двете, използвайте следните опции:

[Заглавието * = "Каспийск"]

CSS ще избере всички елементи в заглавието на които има символи на "Каспиян", т.е.. Д., И "Каспийско" и "Каспиян".

Можете да изберете и тагове, които започват с атрибути на определен характер:

[Заглавието ^ = "характер искате"] {}

или ги прекратява:

[Заглавието $ = "полето характер"] {}.

Предимства: - максимална гъвкавост. Можете да изберете всички съществуващи елементи на страницата, без да бъркаш с класовете.

Недостатъци - използва се сравнително рядко, само при специални случаи. Много уеб дизайнери предпочитат да методика, тъй като класът точка е по-лесно, отколкото да се организира многобройни квадратни скоби и знаци "равно". В допълнение, тези селектори не работят в Internet Explorer версии 7 и по-долу. Въпреки това, които са сега трябва стария Internet Explorer?

псевдо-клас селектори

Обозначава елемент псевдо-статус. Например ,: висене - какво се случва с тази част на страницата, когато задържите ,: посети - посещаваната връзката. Тя също така включва елементи като: първо дете и: последната дете.

Този тип селектор активно се използва в съвременната оформление, защото благодарение на него можете да направите една страница "на живо", без използването на JavaScript. Например, вие искате да се уверите, че когато мишката върху бутона с класа на BTN цвета му се променя. За да направите това, ние използваме следната структура:

.btn: висене {

фон-цвят: червен;

}

Красотата може да бъде определен в основните свойства на бутона, преход имота, например, 0.5s - в този случай, бутонът няма да се изчервявам незабавно, а в рамките на половин секунда.

Добродетели - са широко използвани за "възраждане" на страници. Лесен за използване.

Недостатъци - те не са. Това е много удобен инструмент. Въпреки това, неопитни уеб дизайнери може да се изгуби в изобилието на псевдо-класовете. Проблемът е решен изследване и практика.

псевдо-селектори

"Псевдо" - това са места на страницата, които не са в HTML, но те все още могат да бъдат управлявани. Ти не разбираш ли? Това е много по-лесно, отколкото изглежда. Например, искате да направите първата буква в низа голям и червен, оставяйки други малки и черен текст. Разбира се, може да се заключи, че в писмо една педя с определен клас, но това е дълъг и скучен. Тя е много по-лесно да изберете целия абзац и да използва псевдо :: първа буква. Това дава възможност да се контролира появата на първата буква.

Има доста голям брой от псевдо-елементи. ги вписва в една статия е малко вероятно да успее. Можете да намерите информация в любимата си търсачка.

Предимства - осигуряват гъвкавост, за да настроите външния вид на страницата.

Недостатъци - нови за тях често се объркват. Много подборки от този вид работа, само в някои браузъри.

За да обобщим

Selector - мощен инструмент за контрол на документооборота. Благодарение на него, можете да изберете всеки един компонент на страницата (има дори и само частично). Не пропускайте да се запознаете с всички налични опции, или дори да ги запишете. Това е особено важно, ако създадете сложни страници с модерен дизайн и много интерактивни елементи.