30 Css селектори, видове селектори и синтаксис в CSS

Какво селектор CSS - описание на даден елемент или група елементи, което показва, т браузър изберете за приложение към него стил. Нека разгледаме основните CSS селектори.

CSS селектор клас X. Разликата между име и клас, че един и същи клас може да има множество елементи на страницата, както и номер винаги е уникална. Уроци трябва да се използват за прилагане на същия стил на множество елементи.

Кои браузъри се поддържат:

CSS селектор номер. Лира знак преди CSS селектор X избира артикул, чиято ИД = H. По стилове етикетиране с идентификатор винаги си струва да припомним, че тя трябва да бъде уникален - единственият, така идентификатор трябва да са на страницата. Затова е добре да се използват инструментите за избор на най-класове, класовете или комбинации от имена на тагове. Въпреки това, селектори по номер използвани перфектно в автоматизирано тестване, като оставете да взаимодействат директно с желания елемент, и да имат доверие, че това е само една такава страница.

Кои браузъри се поддържат:

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

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

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

Кои браузъри се поддържат:

селектор CSS тип. Как да изберете всички елементи от същия вид, ако те нямат номер няма класове? Тя трябва да се използва за избор на CSS за типа елемент. Например, за да изберете всички подредени списъците на страницата, използвайте стари, както е показано по-горе.

Кои браузъри се поддържат:

CSS селектор дете или CSS селектор дете се използва по-често. Той се използва, ако е необходимо, за да изберете елементите на определен тип от множество дъщерни елементи. Например, маркирайте всички връзки, които се намират в Ли клетка. В този случай, използвайте този селектор. С помощта на верига от селектори, винаги се запитате дали е възможно да се изолира този елемент да се използва дори по-кратък поредица от селектори.

Кои браузъри се поддържат:

В непосредствена близост до елемент селектор избира само от типа елемент Y, която идва веднага след X. елемента В този случай, всеки параграф веднага след приключването на всяка DIV елемент ще получите специален вид шрифт и размер.

Кои браузъри се поддържат:

CSS селектор дете. Разликата между Y селектори X и X> Y, които считат CSS селектор ще избере само преките подчинените елементи (избира само преки потомци). Например:

CSS селектор #content> ул ще избере само ул, което е пряк потомък на блока Разделение с идентификатор = "контейнер". Той избира ул, е потомък на първия Ли. Това е доста изгодна за избор на скорост CSS.

Кои браузъри се поддържат:

Selector кърмене (sablingovyh) по-малко строги от елементите X + Y. Той избира не само първата, но и всички други елементи, п, за достигане на ол.

Кои браузъри се поддържат:

9) X: посети и X: връзка

Кои браузъри се поддържат:

10) X [заглавие]

CSS селектор атрибут. В този пример ние избираме само връзките, които имат заглавие атрибут.

Кои браузъри се поддържат:

11) X [HREF = "Foo"]

Кои браузъри се поддържат:

12) X [HREF * = "stijit"]

Кои браузъри се поддържат:

13) X [HREF ^ = "HTTP"]

Кои браузъри се поддържат:

14) X [HREF $ = ". Jpg"]

Той използва регулярен израз, както и символът $ за обозначаване на края на линията. В този пример, ние търсим за всички връзки, които се отнасят до изображения с .jpg разширение.

Кои браузъри се поддържат:

15) X [данни - * = "Foo"]

Тук използваме селектор CSS за потребителски атрибути. Добави нашите собствени данни файлов тип атрибут за всяка връзка:

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

Кои браузъри се поддържат:

С помощта на тази процедура, ние можем да изберете елементи с желаната комбинация от атрибути:

Кои браузъри се поддържат:

17) X: проверява

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

Кои браузъри се поддържат:

18) X: след

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

Тук, с помощта на псевдо-клас: след след блока с .clearfix клас създава празен ред, след което се пречиства. Този подход се използва, когато не можете да използвате преливане имота: скрит.

Кои браузъри се поддържат:

19) X: мишката

Кои браузъри се поддържат:

20) X: не (селектор)

Псевдо-не (отрицание) е полезно, когато, например, трябва да изберете всички Разделение, с изключение на това, което има ИД = "съдържание".

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

Кои браузъри се поддържат:

21) X :: pseudoElement

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

Избор на първата буква от параграф:

Изборът на първия ред в параграф:

Кои браузъри се поддържат:

22) X: първо дете

Псевдо-първо детето избира само първото дете на неговата майка. Той често се използва за премахване на границата в първия елемент от списъка. Това е още един псевдо тъй като CSS 1.

Кои браузъри се поддържат:

23) X: последната дете

Псевдо-последната детето избира последното дете на майка елемент. Той се появи само от CSS 3.

Кои браузъри се поддържат:

IE9 + (IE8 подкрепя първо дете, но не и на последно детето. Microsoft (с))

Chrome

Firefox

сафари

Opera 9.6+

андроид

IOS

24) X: само дете

само дете псевдо-класа ви позволява да изберете елементите, които са единствените наследници на родителите си.

Кои браузъри се поддържат:

25) X: тото-дете (п)

Избира детето в брой, определен в параметъра. Селектор тото-дете се цяло число като параметър, обаче, преброяване с 1, т.е. ако искате да изберете втория елемент в списъка, използвайте Ли: тото-дете (2). Всички псевдо използване тото-дете се появи само от CSS 3.

Кои браузъри се поддържат:

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

Ако имате голям списък с елементи в заделянето и изберете Третият елемент от края? Вместо писмено Ли: тото-дете (109). Можете да използвате инструмента за избор на последните потомците на п по-миналата детето. Този метод е същият като предишния, но считано от края.

Кои браузъри се поддържат:

27) X: тото-на-тип (п)

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

Кои браузъри се поддържат:

28) X: тото последна от тип (п)

Псевдо тото последна от тип (п) за избор тото елемент на определен вид от края.

Кои браузъри се поддържат:

29) X: само-на-тип

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

Кои браузъри се поддържат:

30) X: първи тип на

В псевдо-първи от тип избира първия елемент от посочения тип.

Кои браузъри се поддържат: