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

Селекторы

Синтаксис селектора

Простой селектор - селектор типа или универсальный селектор, непосредственно после которого идёт ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор совпадает, если совпадают все его компоненты.

Селектор это цепь из одного или более простых селекторов, разделённых комбинаторами. Комбинаторами являются: пробелы, ">" и "+". Пробелы могут появляться между комбинатором и простыми селекторами вокруг него.

Элементы дерева документов, совпадающие с селектором, называются субъектами селектора. Cелектор, состоящий из одного простого селектора, совпадает с любым элементом, удовлетворяющим его условиям. Предопределённость простого селектора и комбинатора в цепи вызывает дополнительные ограничения для совпадения, так что субъекты селектора всегда являются поднабором элементов, совпадающим с самым правым простым селектором.

Один псевдоэлемент может быть присоединён к последнему простому селектору в цепи, и в этом случае информация стиля применяется к подразделу каждого субъекта.

Группирование

Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.

Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

эквивалентно:

H1, H2, H3 { font-family: sans-serif }

CSS предлагает также другие механизмы "сокращений", включая множественные объявления и сокращённые свойства.

Универсальный селектор

Универсальный cелектор, записываемый "*", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в "Соответствие: Требования и Рекомендации" .

Универсальный селектор не является единственным компонентом простого селектора, символ "*" может быть опущен. Например:

  • *[LANG=fr] и [LANG=fr] эквивалентны.
  • *.warning и .warning эквивалентны.
  • *#myid и #myid эквивалентны.

Соответствие

Cелектор типа совпадает с именем типа элемента языка документа. Cелектор типа совпадает с каждым вхождением типа элемента в дереве документа.

Следующее правило совпадает со всеми элементами H1 в дереве документа:

H1 { font-family: sans-serif }