Css - селектори, главен ИТ

В този урок ще научите основните видове селектори и да се научат да ги използват на практика.

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

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

където: р - този селектор, текст подравняване и размер на шрифта - това е свойства, както и център и 20px - ценности.

Основните видове селектори

• член селектор (например: Разделение);
• селектор клас (например център.);
• идентификатор селектор (например: #footer);
• * Избор на (изберете всички елементи);
• атрибут селектори (например: # 91; HREF * = "YouTube" # 93; );
• псевдо селектори (например: р: първо на тип).

Selector: елемент

Избор на всички елементи в един HTML документ, които имат определен маркер.

Например, множеството на всички елементи

уплътнение равен на 5px.

Selector: клас

Избор на елементите на даден HTML документ с определен клас.

Например, множеството от всички елементи с клас = "център" подравняване на текста в средата.

Селектор: ID

Избор на елемент в HTML документ, като идентификатора.

Например, определени клетката като идентификатор ID = "долния" височината на 50px и външната горната граница 20px.

Selector: *

Избор на елементите на даден HTML документ.

Например, множеството от всички елементи на вътрешна и външна облицовка, равни на 0.

атрибут селектори

Умение селектори, предназначени да изберете елементи, в зависимост от атрибут на елемента или неговата стойност. Следните видове атрибути: # 91; # 93 атрибут. # 91; атрибут = стойност # 93. # 91; атрибут ^ = стойност # 93. # 91; атрибут | = стойност # 93;. # 91; атрибут $ = стойност # 93. # 91; атрибут * = стойност # 93. # 91; атрибут

селектор: # 91; # 93 атрибут;

Избор на всички елементи в един HTML документ, които имат определен атрибут.

Например, задайте цвета на фона на всички елементи с цел атрибут.

селектор: # 91; атрибут = стойност # 93;

Избиране на всички елементи, които имат атрибут = "стойност".

Например, за да инсталирате зелен фон на всички елементи с относителна = "Nofollow".

селектор: # 91; атрибут ^ = стойност # 93;

Избира всички елементи, които имат атрибут, чиято стойност започва с стойност.

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

селектор: # 91; атрибут | = стойност # 93;

Избиране на всички елементи, които имат атрибут, чиято стойност е равна на стойността или започва със стойността следва ценностно * (стойност с опция за пробив, след което има остатъчна стойност съдържание).

Например, задайте оранжев цвят на фона на всички елементи с атрибута клас. стойност е равна или тест изпитателно *.

селектор: # 91; атрибут $ = стойност # 93;

Избира всички елементи, които имат атрибут, чиято стойност завършва при стойност.

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

селектор: # 91; атрибут * = стойност # 93;

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

Например, за да инсталирате зелен фон цвят за всички елементи с HREF атрибут съдържа подниза "YouTube".

селектор: # 91; атрибут

Избиране на всички елементи, които имат атрибут, чиято стойност съдържа стойност като една от ценностите на интервал.

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

псевдо

Псевдо използва за определяне на конкретното състояние елемент. За разлика от тези класове, те не са изрично посочени в HTML. В CSS име псевдо започва с двоеточие (:). Следните видове псевдо-класовете. връзка. Посетих. активен. висене. съсредоточи. Ланг (език). първо дете. първата по тип. последно дете. последната от тип. само дете. само-на-тип. тото-дете (н). п по-миналата дете (н). тото-на-тип (п). тото последна от тип (п). корен. празно. мишена. активирана. хора с увреждания. Проверих. не (селектор).

Selector: линк

Избор на всички, които не са посетили връзки.

Например, задайте зелен цвят за всички, които не са посетили връзки.

Selector: посетен

Избор на всички посетени връзки.

Например, задайте розовия цвят за всички посетени връзки.

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

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

Например, задайте жълт цвят на текста, когато кликнете върху елемент.

Selector: навъртам

Изберете елемент с курсора на представянето му.

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

Selector: фокус

Selector: съсредоточи за избор на елемент, който е на фокус. Тя е предназначена за елементи, които получават клавишни събития или други входни устройства.

Например, задайте светло син цвят на фона на елемента, който е на фокус.

Selector: Ланг (език)

Selector: Ланг () се използва, за да изберете елементи с език, атрибут, който има определена стойност.

Например, задайте жълт цвят на фона на всички елементи.

. чиито Ланг атрибут съдържа стойността "ЖП".

Selector: първо дете

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

Например, за да изберете всеки елемент

. което е първото дете на неговата майка.

Selector: първата по вид

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

Например, за да изберете всеки елемент

. което е първото дете на елемент от този тип родител.

Selector: последната дете

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

Например, за да изберете всеки елемент

. което е последното дете на неговата майка.

Selector: последната от тип

Псевдо: последната от тип се използва за избор на тези елементи, ако те са последното дете елемент от този тип (таг) на своята майка. За разлика от psvedoklassa: последната дете. тази псевдо-: последната от тип сметки за само елементи с определен етикет.

Например, за да изберете всеки елемент

. което е последното дете елемент от този тип родител.

Selector: само дете

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

Например, за да изберете всеки елемент

. което е единственото дете на неговата майка.

Selector: само-на-тип

Псевдо: само-на-тип се използва за избор на тези елементи, ако те са единствените деца елементи от този тип (таг) на своята майка. За разлика от psvedoklassa: само дете. тази псевдо-: само-на-тип сметки за само елементи с определен етикет.

Например, за да изберете всеки елемент

. което е единственото дете на даден вид на своята майка.

Selector: тото-дете (п)

Псевдо-класа: тото-детето (н) се използва, за да изберете тези елементи, ако те са п -ymi дете на неговата майка. Преброяването започва с елементи 1.

Например, за да изберете всеки елемент

. което е второто дете на неговата майка.

Псевдо-класа: тото-дете (н) н може да се използва вместо ключови думи странно и дори. са предназначени да изберете деца елементи, които са съответно четните или нечетните индекси (индекси деца елементи започват с 1).

Например, да зададете различен цвят за четни и нечетни деца елементи

.

Също така в Псевдо: тото-дете може вместо използва формулата п е + б. където А и Б - е броят, посочен от потребителя. А п - е брояч, който приема стойностите 0, 1, 2, 3.

Например, за да изберете дъщерните елементи

. индекси са кратни на три.

Например, за да изберете дъщерните елементи

. кодове, които са 1, 4, 7, 10.

Selector: п по-миналата дете (п)

Псевдо-класа: п по-миналата детето (н) е подобен на този клас: тото-дете (н) с тази разлика, че броят на подчинените елементи се извършва от края. Също Псевдо: п по-миналата дете (п) може да се използва вместо н странно. или дори с формула AN + б.

Селектор: тото-на-тип (п)

Псевдо: тото-на-тип (н) се прилага за посочените елементи за подбор, ако те са п -ymi дъщерните елементи от този тип (таг) на своята майка. За разлика от psvedoklassa: тото-дете (н). псевдо: тото-на-тип (п) се отчита само елементите с определен маркер. Освен това, този псевдо-клас: тото-на-тип (п) и позволява използването на ключови думи нечетни. и дори формула AN + б.

Например, за да изберете всеки елемент

. което е второто дете на даден вид на своята майка.

Селектор: тото последна от тип (п)

Псевдо: тото-последната от тип (н) е подобен на този клас: тото-на-тип (н) с разлика, че се провежда от края на отброяването на този тип подчинените елементи (таг).

Selector: корен

Псевдо-клас: корен се използва, за да изберете основния елемент на HTML документ, т.е. елемент . За разлика от селектор HTML # 123;. # 125; тази псевдо има по-висок приоритет:

Например, задайте жълт цвят на фона.

Selector: празна

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

Например, задайте цвета на фона и размера на празните елементи

.

Selector: мишена

Псевдо-класа: Целта е да се подберат идентификатор на елемент (например: част 1), която е посочена в него след символа #.

Selector: активиран

Псевдо: активирана за форми избор елемент, които са достъпни за контрол, т.е. те могат да реагират на взаимодействие с потребителя.

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

Selector: инвалиди

Псевдо: инвалиди за избор на елементи форми, които са недостъпни за контролиране, т.е. те не могат да отговорят на действията на потребителите.

Например, за да определят цвета на фона на жълти елементи . който не е достъпен за управление.

Selector: проверява

Псевдо-класа: проверени за избора на елементи радио ( ), Checkbox ( ) И опция. които са включени.

Например, изберете елементите, които са в затворено положение, т.е. Проверих.

Selector: Не (селектор)

Псевдо: Не (селектор) за избиране на всички клетки, които не попадат под действието на споменатите селектор.

Например изберете всички елементи на дадена уеб страница, с изключение на