Опубликован: 06.06.2006 | Доступ: свободный | Студентов: 3910 / 694 | Оценка: 4.34 / 4.02 | Длительность: 21:23:00
Лекция 5:

Селекторы

Аннотация: Описываются селекторы, их синтаксис, а также псевдоэлементы и псевдоклассы.
Ключевые слова: css, селектор, диапазон, совпадает, HTML, XML, синтаксис, CSS2, универсальный селектор, дочерний селектор, :first-child, псевдокласс, :link, псевдоклассы, :active, :hover, :focus, Псевдокласс :lang, селекторы атрибутов, "lang", список, разделённых дефисами, простой селектор, селектор типа, ID, комбинатор, субъект селектора, псевдоэлемент, информация, множественные объявления, сокращённое свойство, селекторы потомков, цвет текста, атрибут, селектор дочерних элементов, BODY, LI, представление, вертикальные поля, math, пространство, форматирование, совпадение, =, точное совпадение, ~=, |=, copyleft, значение, идентификатор, псевдоэлементы, псевдоэлемент :after, субъект, выход, :first-line, :first-letter, псевдокласс :link, псевдокласс :visited, псевдокласс :hover, псевдокласс :active, псевдокласс :focus, :visited, язык (человеческий), псевдокласс :lang, псевдоэлемент :first-line, инлайн-элемент, 'text-transform', 'text-shadow', псевдоэлемент :first-letter, начальные заглавные, зависающие заглавные, псевдоэлемент :before

Блоки символов для подстановки

В CSS правила совпадения символов определяют, какое правило стиля применить к элементам дерева документа. Такие блоки символов (патэрн), называемые селекторами, могут иметь диапазон имён от простых имён элементов до сложных контекстуальных блоков. Если все условия в патэрн верны для конкретного элемента, селектор совпадает с элементом.

Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.

В этой таблице суммирован синтаксис селекторов CSS2:

Патэрн Смысл Описан в разделе
* совпадает любой элемент. Универсальный селектор
E совпадает любой элемент E (т.е. элемент типа E). Типы селекторов
E F совпадает любой элемент F, являющийся потомком элемента E. Селекторы-потомки
E > F совпадает любой элемент F, являющийся дочерним относительно элемента E. Дочерние селекторы
E :first-child совпадает элемент E, если E является первым дочерним элементом своего родителя. Псевдокласс :first-child

E :link

E:visited

совпадает элемент E, если E является якорем ещё не посещённого ресурса гиперссылки ( :link ) или уже посещённого (:visited). Псевдоклассы гиперссылки

E :active

E :hover

E :focus

совпадает элемент E во время определённых действий пользователя. Динамические псевдоклассы
E:lang(c) совпадает элемент типа E, если он на (человеческом) языке с (язык документа специфицирует то, как определяется язык). Псевдокласс :lang()
E + F совпадает любой элемент F, непосредственно перед которым идёт элемент E. Смежные селекторы
E[foo] совпадает любой элемент E с установленным атрибутом "foo" (с каким-либо значением). Селекторы атрибутов
E[foo="warning"] совпадает любой элемент E, чьё значение атрибута "foo" точно равно "warning". Селекторы атрибутов

E

[foo~="warning"]

совпадает любой элемент E, чьё значение атрибута "foo" является списком разделённых пробелами значений, одно из которых точно равно "warning". Селекторы атрибутов

E

[lang|="en"]

совпадает любой элемент E, чей атрибут "lang" содержит список разделённых дефисами значений, начинающийся (слева) с "en". Селекторы атрибутов
DIV.warning Только в HTML. То же, что DIV[class~="warning"]. Селекторы классов
E#myid совпадает любой ID элемента E, эквивалентный "myid". Селекторы ID