CSS селектори и техните типове

CSS селекторите са специфична CSS структура, която ви позволява да изберете конкретен елемент в HTML кода и да го стилизирате. Всеки от тях има своя собствена специфичност, т.е. може да се припокрива със свойствата на другите, по-„слаби“.

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

Най-простите селектори - чрез етикет и клас. Селекторът на етикета е най-често срещаният и избира всички елементи с посочения маркер. Например, можете да напишете свойствата на CSS кода от следната форма: p {color: blue} ", където" p "е маркер на абзаца, а цветът: blue означава цвета на текста. В резултат текстът в параграфите ще бъде в синьо. Селекторите по етикет могат да се преброяват чрез запетая, след което не е необходимо да пишете имота два пъти.


Ако на някои класове е присвоен определен клас, например "синьо", тогава селекторът на CSS може да се регулира още по-точно. Но вписването му в свойствата ще бъде различно - точка ще се появи пред името на класа. Това означава, че за да изберете всички абзаци, които са присвоени на синия клас и да ги оцветят в синьо, CSS свойствата трябва да бъдат написани, както следва: ".blue: {color: blue}". Този селектор е по-специфичен от CSS селектора по етикет и е по-силен от него, но е най-простият. Има по-сложни правила, които ви позволяват да избирате малки групи от елементи.

Характеристики на селекторите с идентификатор

Селекторите за id или id са по-специфични от класа и атрибута. Това означава, че когато се използва в каскада, те ще "надминат" други подобни селектори. Идентификаторите също ви помагат да изберете точноопределен елемент в кода, но използването им в дизайна на страниците се счита за лоша практика сред планиращите. Само в много редки случаи, като създаването на плъзгач на CSS, тази практика е неприемлива. Факт е, че в рамките на една страница може да има само един елемент с определен идентификатор. Следователно, поради уникалността на CSS идентификатора, той може да се използва само за един единствен елемент. В този случай е много по-логично да се използват класове, а не идентификатори.

Различни мисли за селектора по id

Но има и обратното мнение, че идентификаторът помага да се идентифицира кодовия фрагмент на страница, която трябва да бъде в една единствена инстанция. В този случай, въпреки че класовите комутатори могат да го заменят, те трябва да се използват за големи групи елементи, а в местата, където е необходима точност, е по-добре да използвате id. Всяка занаятчия има право да развие собственото си мнение по темата и да напише кода в свой собствен стил. Когато пишете селектора с id, преди него се използва символът "#". Това означава, че кодовата линия ще изглежда така: "#blue: {color: blue}". С това вписване елементът с ID #blue ще бъде боядисан в синьо.

Използване на каскадата

Когато се използват HTML CSS селекторите на id, можете да използвате и свойството каскада. Например, ако вътре в маркер с идентификатор, който искате да изберете дете маркер и да промените неговите свойства, първо трябва да запишете името на идентификатора с мрежата, след това детето маркер и неговите свойства.Тези селектори се наричат ​​вложени. Това означава, че кодовата линия ще изглежда по следния начин: #id p {color: blue}. Тогава цветът на текста в родителския елемент с този идентификатор в абзаца дете ще се промени на син.

Използване на селектори на детски елементи

Друга опция за използване на каскадата за промяна на свойствата на дъщерните елементи се използва, ако трябва само да изберете определена част от кода. Той също се нарича селектор на потомци. Например, за да изберете абзац в ред от таблица, се използва следният запис в CSS селектора: "ul li & gt; p: {color: blue} ". Струва си да се обърне внимание на факта, че колкото по-дълъг е записът, толкова по-голяма е вероятността да се промени някаква специфична характеристика на елемента, тъй като тя става по-приоритетна за каскадата. Например, елементите с някои други свойства на родителския CSS селектор няма да променят свойствата си в тяхната цялост. Само една част от текста в списъка е боядисана.

Избор на сестрински елементи

Друг интересен начин да се използват каскадни - следващите CSS селектори. Те се записват като сума от селектори: "span + a {color blue}". В този случай съседът е този, под който има друг, съответстващ на необходимите параметри. Така, ако в кода има три елемента, тогава имотът не се отнася за първия, защото няма съсед, а за всички следващи - така. Това става чрез иконата за сума, когато се създават следните селектори, а не предишните. Този запис помага за намаляване на кода и не записва множество CSS селектори за различниетикети, прилагащи същите свойства към тях. Ако вторият елемент в списъка уточнява допълнителен клас, а вписването се променя на .class + a {color blue}, тогава отброяването ще изчезне от него и свойствата ще се променят в следните елементи на правилата за настройка и първите две ще останат същите.

Сега приемем, че в нашия код има три еднакви маркера с различни класове и трябва да изберете всички елементи след някакво определено. В този случай използването на само селектори за CSS тагове няма да работи. За целта се използва селектор от следния тип: ".class ~ div". Така се избират елементи с тагове div, които следват даден клас. Ако искаме да изберем не само елементите с тагове div, но всички следващи, вместо етикета след знака на тилда, трябва да поставите символа звездичка - "*". Такъв запис ще означава, че трябва да изберете всичко, което следва след даден клас. Можете изобщо да изберете всички елементи на страницата, ако оставите звездичка точно като селектор.

Селектори на атрибути на CSS

Да предположим, че нашият код съдържа елементи с някои атрибути, но всички те се различават един от друг и са написани чрез тире, и ние трябва да изберем онези, в които името на класа започва с определена дума, например, "селектор", а класовете се разделят със знак "-". Какво трябва да направя в този случай? Селекторният запис започва с квадратни скоби, където името на атрибута се записва първо, след това вертикалната наклонена черта, знакът "=" и "selector": "data- | = selector". След това ще напишем желаното свойство, което искате да промените. В резултат елементът се избира с даденитепараметри. Чрез промяна на класовете можете да промените свойствата на някои части от кода. Ако имената на класовете не се пишат чрез тире, а с една дума, те могат да бъдат избрани, но с малко по-различен запис. В този случай вертикалната наклонена черта се заменя със символа "^": "data ^ = selector". Този селектор избира подстрока с началото на името на класа.

Как да изберем елемент с определен край в името на класа

Сега ще направим по различен начин и ще изберем част от кода не от началото на описанието на класа, а от последните букви в неговото име. За да направим това, имаме нужда от доларова значка. Слагаме го на мястото на отметката, а след знака за равенство пишем края на името на класа: "data $ = ctor". Сега елементите с тази комбинация от букви ще бъдат избрани и към тях ще бъдат приложени определени свойства. Можете да изберете всеки атрибут. Нека да разгледаме как да направим, ако трябва да намерим елемент с някаква комбинация от букви в средата на една дума. В този случай променяме знака за долар на звездичка, а след знака за равенство пишем буквите: "data * = ct".

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

Специализираните селектори в CSS стил обикновено се използват за връзки, които отразяват техните различни състояния: спокоен, фокусиран, активен, преминат - те се наричат ​​псевдокласове. Псевдокласата за активната връзка, към която се показва курсора, се записва като "a: active". Следват някои свойства, най-често фоновите промени или добавената сянка. Ако добавите това свойство към дадена връзка и кликнете върху нея, тя ще промени цвета си на дадения. Друг псевдо-клас hover показва, че връзката вече е преминала.То се записва като "a: hover".

Характеристиките на състоянията активни и фокусирани

Активното често се бърка с друго състояние - фокус. Пише по следния начин: "a: focus" и показва активния статус на бутона при работа с клавиатурата. Това означава, че ако използвате клавиша TABLES, активната връзка ще бъде маркирана със специален цвят. Това свойство трябва да се използва, тъй като използването на мишката за навигация в сайта може не всички потребители. Някои от тях могат да имат лошо зрение или други здравни ограничения, така че те се движат по страницата с помощта на ключове или специални джаджи. Пренебрегването на статуса на бутон във фокус е голям недостатък за такъв параметър в дизайна на сайта, като достъпност и има значително влияние върху присъствието й от специална категория потребители. При обикновена навигация с мишката, връзката става активна и фокусирана. Следователно, когато се оформят елементи, е важно да се обърне внимание на това.

Псевдо-елементи

Псевдо-елементите ви позволяват да посочите специални стилове, без да го дефинирате в самата структура на HTML. Те се записват по следния начин: името на селектора, знака "::", името на псевдоелемента. Най-често срещаните елементи „преди“ и „след“. Те притежават свойството "съдържание", не могат да бъдат приложени към вътрешните стилове. "След" се изисква за добавяне на съдържание след съдържанието на даден елемент. Какво точно да вмъкнете е написано в свойството "съдържание". По същия начин псевдоелементът "преди" добавя съдържание към съдържанието на елемента. Използването на тези специални селектори ви позволява да намалите кода и да не пишете всеки път новструктура за някаква част от нея, ако искате да добавите малък детайл към определено място на контейнера. Те често се използват при оформянето на страници и добавянето на някои декоративни елементи. Комбинациите от всички тези опции помагат за създаването на необичайни ефекти на страницата и значително помагат на майстора.

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