Css селектори описание и анализ на най-основните от тях

CSS селектори - една от основните характеристики на езика CSS. Селектори позволяват да се прилагат като група от елементи, а само един от тях.

Селектори в CSS

Селектори трябва да каже на браузъра как да се използват елементи от стиловете, които са описани в скоби.

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

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

Tag Selector - най-лесният. Той е показано в примера. За да го напиша в CSS, което трябва да се напише име на маркер без ъглови скоби. Стилове ще се прилагат към всички елементи, с таг.
маса<> - стилове за всички маси
Ли<> - стилове за всички елементи в списъка
А<> - стилове за всички връзки

Стил клас - всеки елемент може да бъде свързан към уеб страница стил клас. Дори и една буква. След това в CSS-файл, който може да се отнася към този елемент, като напишете свои собствени стилове за него. За да направите това, поставете на мястото и напишете името на класа стил след него. примери:
.за<> - правилата важат за всички елементи, които имат клас атрибут = "за"
.надолу<> - правилата важат за всички елементи, които имат клас атрибут = "надолу"
.поплавък<> - правилата важат за всички елементи, които имат клас = "флоат" атрибут

Както можете да видите, основната точка на предлагането. Стил клас може да се свърже с неограничен брой елементи. Елемент може да се възлага на няколко класа.

Identifier - друг тип селектори. Един идентификатор, можете да посочите само един елемент. Тя не може да има две идентификатори номер и прикрепен към този елемент не може да се установи никъде другаде.

Той попита това:

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

За да се отнасят до един елемент с идентификатор чрез CSS да напишете номер стойност и постави скарата пред него.

# Първа шрифта: 22px
>

Ние се обърна към един абзац с идентификатор = на първо място. Style ще важи само за него. Останалите точки от размера на текста няма да се променят.

псевдо

За псевдо-класовете съм написал отделна статия. така че аз не виждам причина да се повтаря.

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

Друго важно правило да бъде наясно. Селектори класове стил могат да бъдат написани, без да ги разделя един от друг. Например:
.class1.class2 - изберете тези елементи, които имат и двете от тези класове.
.class1.class3.class8 - избира елементите, които се използват като стил на три класа.

вложени селектори

Ако селектори отделени една от друга с интервал, той може да бъде изтеглен до желаната опция за нас. примери:
Таблица TD - ще изберете всички клетки, които се намират в таблиците
Ул ли е - избира всички връзки, които се намират в елементи от списъка (списък на елементите, от своя страна, са в самите списъци)
.Клас1 р - избира всички точки с клас атрибут = "Клас1"
.Class2 р педя - избира всички етикети. лежи в тире с клас Class2.

Инвестиране и комбинирани по такъв начин може да бъде неограничен брой пъти. примери:
#header .logo: раждали първото писмо<> - ще изберете първата буква в логото Span, който се намира в капачката
.class1.class2: мишката<> - определяне на стила, когато мишката за елементи, които имат и двете клас стил.

селектори за деца

Ако трябва да определя стила на елементите майки, които са пряко дъщерни дружества. че е необходимо да го регистрирате:
Ул> Li<> - избира елементите на списъка са поставени в нея пряко и не принадлежат към други тагове
P> а<> - ще изберете само тези препратки в параграфи, които снасят директно в тях, не вложен в други маркери (което, от своя страна, е инвестирала в точки)
например:

Ако такъв селектор регистър P> с един. дали стилове, прилагани към препратката в горния пример? Не, защото тя все още е внедрена в друг етикет, който не е пряко дъщерно дружество.

Близки селектори

Последното нещо, което ще разгледаме днес. Ако се регистрирате в CSS по този начин:
.Клас1 + .class4 <>. след селектора избира елемент с клас атрибут = "class4". и този елемент трябва да застане в HTML-код, непосредствено зад елемента с клас Клас1. Само по този начин ще работи. Отново разгледаме един пример:

Има ли по-горе за избор на работа (.class1 + .class4 <> )? Не, защото елементите не стоят рамо до рамо. Между тях е IMG таг. Но ако не го изтриете, а след това той ще работи.

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

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

За да определите кои стилове са приоритет, използвайте прости правила:
Id е селектора приоритет. Ако елементът има класа и стил номер. и двете са възложени същите свойства, с различни стойности, след това стиловете, които са написани за ID ще бъдат направени.

приоритет за избор на клас е повече от таг селектора (стр, маса, ул). В псевдо-клас има същото тегло като това на прост клас. р: първа линия с предимство пред .firstline. защото през втората селектора само един клас, а през първото - таг селектора + псевдо.

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