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

Езикът за описване на външния вид на документа за CSS непрекъснато се развива. С течение на времето не само неговата мощност и функционалност се увеличават, но и гъвкавост и лекота на използване.

CSS селектори

Да започнем да разбираме. Отворете всички уроци по CSS, поне една секция в нея ще се съсредоточи върху видовете селектори. Това не е изненадващо, защото те са един от най-удобните начини за управление на съдържанието на страницата. С тяхна помощ можете да взаимодействате с абсолютно всички HTML елементи. Сега има 7 вида селектори:

• за маркер-
• за класове;
• за ИД;
• универсален;
• атрибути;
• за взаимодействие с псевдо класове;
• за контролиране на псевдоелементи.

Синтаксисът е прост. За да научите как да използвате CSS селектори, просто прочетете за тях. Коя опция е по-добре да изберете да контролирате съдържанието във вашия случай? Нека се опитаме да разберем.

Селектори на маркери

Това е най-простият вариант, който не изисква специални знания за писане. За да управлявате маркерите, трябва да използвате името им. Да предположим, че "капачката" на сайта Ви е обвита в маркер

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

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

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

Най-често срещаният вариант. Той е предназначен за управление на маркери с клас атрибути. Да предположим, че кодът ви има три блока

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

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

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

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

Селектор по ID

За тази опция мненията на кодера и програмистите са двусмислени. Някои уроци CSS обикновено не препоръчваме да използвате ID, тъй като те могат да причинят проблеми при наследяване, когато се използват по невнимание. Много специалисти обаче активно ги разпространяват по време на маркирането. Зависи от вас. Синтаксисът е: решетъчен знак ("#"), Тогава името на блока. Например, # Червена.

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

Предимства - можете да контролирате конкретен елемент, като не обръщате внимание на стиловете за маркери и класове.

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

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

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

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

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

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

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

По атрибути

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

въведете [type = rsquo-textrsquo -] {}

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

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

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

въведете [placeholder = "Въведете име"] {} или въведете [placeholder = "Enter Password"]

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

[заглавие * = "kaspiysk"]

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

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

[title ^ = "знакът, от който се нуждаете"] {}

или завършва с тях:

[title $ = "желаният знак"]] {}.

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

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

Псевдокладови селектори

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

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

.btn: мишката {

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

}

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

Предимства - активно използвани за "съживяване" на страниците. Лесен за използване.

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

Псевдоелементни селектори

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

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

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

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

Да обобщим

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