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

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

CSS селектори

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


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

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

    Това е най-простият вариант, който не изисква специални познания за писане. Трябва да използвате името им, за да управлявате маркерите. Да приемем, че "заглавката" на сайта ви е опакована в маркер. За да го използвате в CSS, трябва да използвате селектора на заглавката {}. Предимства - лекота на използване, гъвкавост. Недостатъци - пълна липса на гъвкавост. В примера по-горе всички заглавни етикети ще бъдат избрани незабавно. А какво, ако трябва да управляваш само един?

    Класови селектори

    Най-често срещаният вариант. назначенза управление на тагове с атрибута class. Например в кода ви има три блока, всеки от които изисква определен цвят. Как да го направя? Стандартните CSS селектори не са подходящи за тагове, определят параметри за всички блокове едновременно. Изходът е прост. Присвояване на елементи от класа. Например, първият div има клас = 'червен', вторият - class = 'blue', третият - class = 'green'. Сега можете да ги изберете чрез CSS.


    Синтаксисът е: посочете точката ("."), След което ще напишем името на класа. За да управляваме първия блок, използваме .red дизайн. Второто е .blue и така нататък. Важно! Препоръчително е да се използват ясните стойности на атрибута class. Лош тон е използването на транслитерация (например, krasiviy-blok) или произволна комбинация от букви /цифри (ojfh834871). В такъв код вие сте длъжни да се объркате, да не споменавате трудностите, с които ще трябва да се сблъскате с онези, които ще се ангажират с проекта след вас. Най-добрият вариант е да се използва някаква методология, като BEM.
    Предимства - сравнително висока гъвкавост. Недостатъци - може да има един и същ клас в няколко елемента, което означава, че те ще бъдат редактирани едновременно. Проблемът е решен с помощта на методологията, както и на наследяването на препроцесори. Не забравяйте да овладеете по-малко, sass или друг препроцесор, те значително ще опростят работата.

    Селектор по ID

    Що се отнася до тази опция, мненията на дизайнерите и програмистите са неясни. Някои уроци за CSS обикновено не препоръчват използването на идентификатор, защото те не се използват внимателноможе да предизвика проблеми с наследяването. Въпреки това, много специалисти активно ги поставят в рамките на маркирането. Решете за вас Синтаксисът е: символът на решетката ("#"), след това името на блока. Например, #red.
    ID е различен от класа за няколко параметъра. Първо, страницата не може да има два идентични идентификатора. На тях се присвояват уникални имена. Второ, такъв селектор има по-висок приоритет. Това означава, че ако поставите класа в червен клас и посочите червения цвят на фона в CSS таблиците, а след това го присвоите на id blue и зададете син цвят, блокът ще стане син. Ползи - Можете да управлявате конкретен елемент, без да обръщате внимание на стила за етикети и класове. Недостатъците са лесно объркани с голям брой идентификатори и класове. Важно! Ако използвате метода BEM (или неговите партньори), обикновено не се нуждаете от идентификационен номер. Тази техника на оформление включва използването на уникални класове, което е много по-удобно.

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

    Синтаксис: звездичка ("*") и къдрави скоби, т.е. * {}. Използва се за присвояване на определени атрибути на всички елементи на страницата наведнъж. Кога може да е необходимо? Например, ако искате да зададете свойството за оразмеряване на полето на страницата: border-box. Може да се използва не само за управление на всички компоненти на документа, но и за управление на всички дъщерни елементи на блока, например div * {}.
    Ползи - Можете да управлявате голям брой елементи в даден момент. Недостатъци -не е достатъчно гъвкава. В допълнение, използването на този селектор в някои случаи забавя работата на страницата.

    По атрибути

    Позволява ви да контролирате елемент с конкретен атрибут. Например, имате няколко маркера за въвеждане с различен тип атрибут. Един от тях - текст, втори - парола, трети - номер. Разбира се, можете да поставите всеки клас или идентификатор, но това не винаги е удобно. CSS селекторите дават на атрибутите възможността да определят стойности за конкретни тагове с максимална точност. Например, ето как: input [type = 'text'] {} Този селектор на атрибути избира целия текст за въвеждане. Инструментът е много гъвкав, може да се използва с всякакви тагове, които могат да имат атрибути. Но това не е всичко! CSS спецификацията има способността да контролира елементите дори с голямо удобство!
    Представете си, че вашата страница има вход с атрибута placeholder = "Въведете име" и въведете placeholder = "Въведете парола". Те могат да бъдат избрани и чрез селектора! За това се използва следният дизайн: input [placeholder = "Enter name"] {} или input [placeholder = "Enter password"] По-гъвкава работа с атрибути. Да предположим например, че имате няколко маркера със сходни атрибутни заглавия (да речем, "Каспийски" и "Каспийски"). За да изберете и двете, използваме следните селектори: [title * = "kaspiisk"] CSS ще избере всички елементи в заглавието, съдържащи символите "Каспийски", т.е. Можете също да изберете тагове, чиито атрибути започват с определени знаци: [title ^ = "характер, който искате"] {} или завършващи с тях:[title $ = "задължителен символ"] {}. Ползи - максимална гъвкавост. Можете да изберете всякакви съществуващи елементи на страницата, без да се притеснявате за тях. Недостатъци - използвани сравнително рядко, само в определени случаи. Много плановици предпочитат методологията, тъй като е по-лесно да се определи клас, отколкото да се подредят няколко квадратни скоби и да се подпише "един". Освен това тези селектори не работят в Internet Explorer 7 и по-долу. Но кой сега има нужда от стария Internet Explorer?

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

    Псевдокласът обозначава състоянието на елемента. Например: hover - какво се случва с част от страницата, когато задържите курсора,: посетена - посетена връзка. Те включват елементи като: първо дете: последно дете.
    Този тип селектори се използва активно в текущото оформление, защото ви позволява да направите страница "на живо" без използването на javascript. Например, искате да се уверите, че когато щракнете върху бутона с класа btn, цветът му се променя. За да направите това, използвайте следния дизайн: .btn: hover {background-color: red; } За красота можете да посочите в основните свойства на този бутон свойството на прехода, например в 05 s - в този случай бутонът ще мига не мигновено, а за половин секунда. Предимства - активно се използват за "съживяване" на страниците. Лесен за използване. Недостатъци - те не са. Това е наистина удобен инструмент. Въпреки това, неопитни манипулатори могат да бъдат объркани с голям брой псевдокласове. Проблемът е решен чрез обучение и практика.

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

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

    Да обобщим

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

    Свързани публикации