Группировка селекторов

Предыдущая страница Селекторы элементов CSS
Следующая страница Подробное описание селекторов класса CSS

Группировка селекторов

Предположим, что вы хотите, чтобы элементы h2 и абзацы имели серый цвет. Чтобы достичь этой цели, наиболее простым способом является использование следующих объявлений:

h2, p {color:gray;}

Разместите селекторы h2 и p слева от правила и разделите их запятой, чтобы определить правило. Стиль справа (color:gray;) будет применяться к элементам, на которые ссылаются эти селекторы. Запятая сообщает браузеру, что в правиле содержится два разных селектора. Без этой запятой смысл правила был бы совершенно иным. См. также выборку потомков.

можно группировать любое количество селекторов, и нет ограничений по этому поводу.

Например, если вы хотите показать много элементов серым цветом, вы можете использовать такие правила, как:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

Совет:Через группировку, создатели могут «сжимать»某些 стили «вместе», что позволяет получить более краткие таблицы стилей.

Две следующих группы правил дают одинаковый результат, но легко看出,哪一个 schreiben легче:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

Попробуйте сами

Группировка предлагает несколько интересных вариантов. Например, все правила в следующем примере эквивалентны,每组 просто демонстрирует различные методы группировки селекторов и правил:

/* группа 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* группа 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* группа 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

попробуйте сами:

Обратите внимание, что в группе 3 используется «группировка заявлений». Мы расскажем о «группировке заявлений» позже.

Выборщик wildcard

CSS2 ввел новый простой выборщик - общепризнанный выборщик (universal selector), который представлен звездочкой (*). Этот выборщик может соответствовать любому элементу, как wildcard.

Например,下面的规则 сделает каждый элемент в документе красным:

* {color:red;}

Попробуйте сами

Эта запись эквивалентна группировке всех элементов в документе. Используя общепризнанный выборщик, вам нужно всего один раз нажать клавишу (только один звездочка) для того, чтобы установить значение свойства color всех элементов в документе в red.

Группировка заявлений

Мы можем объединять как выборщики, так и заявления.

Предположим, что вы хотите, чтобы все элементы h1 имели красный фон и отображались с помощью шрифта Verdana высотой 28 пикселей в синем тексте. Вы можете написать следующий стиль:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Но такой подход не очень эффективен. Особенно если создавать такой список для элемента с несколькими стилями, это может быть очень сложно. Напротив, мы можем объединить заявления вместе:

h1 {font: 28px Verdana; color: white; background: black;}

Это имеет такой же эффект, как и три предыдущих строки таблицы стилей.

Обратите внимание, что для группировки заявлений一定要 использовать точку с запятой в конце каждого заявления, это очень важно. Браузер будет игнорировать пробельные символы в таблице стилей. Достаточно добавить точку с запятой, чтобы смело использовать следующий формат для создания стиля:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Попробуйте сами

Как вы думаете, читается ли это лучше?

Но если пропустить второй точку с запятой, пользовательский агент интерпретирует этот стиль следующим образом:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Попробуйте сами

Потому что background для color не является законным значением, и поскольку можно указать только один ключевое слово для color, пользовательский агент полностью проигнорирует это заявление color (включая background: black). Таким образом, заголовок h1 будет отображаться только в синем цвете, без красного фона, хотя возможно, что заголовок h1 вообще не получит синий цвет. Напротив, эти заголовки будут отображаться только в default цвет (обычно черный) и не будет фона. Декларация font: 28px Verdana по-прежнему действует нормально, так как она действительно заканчивается точкой с запятой.

Как и группировка селекторов, группировка заявлений также является удобным методом, который позволяет缩短 таблицу стилей, сделать ее более понятной и легкой для поддержки.

Совет:Добавление точки с запятой после последнего заявления в правиле - это хорошая привычка. При добавлении другого заявления не нужно беспокоиться о том, что вы забудете добавить еще одну точку с запятой.