Продвинутый синтаксис CSS

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

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

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Наследование и проблемы с ним

Согласно CSS, дочерние элементы наследуют атрибуты от родительского элемента. Но это не всегда работает так. Посмотрите на следующее правило:

body {
     font-family: Verdana, sans-serif;
     }

Согласно этому правилу, элемент body сайта будет использовать шрифт Verdana (если система посетителя содержит этот шрифт).

Через наследование CSS, дочерние элементы будут наследовать атрибуты наиболее высокого уровня элемента (в данном примере body). Не требуется дополнительных правил, все дочерние элементы body должны отображать шрифт Verdana, и это также относится к дочерним элементам этих элементов. И в большинстве современных браузеров это действительно так.

Но в те годы кровавых битв браузеров, это не всегда происходило, в то время поддержка стандартов не была приоритетом для предприятий. Например, Netscape 4 не поддерживает наследование, он не только игнорирует наследование, но и игнорирует правила, применяемые к элементу body. В IE/Windows до IE6也存在相关问题， стили шрифта в таблицах будут игнорироваться. Что же нам делать?

Будьте добры к Netscape 4

Счастливо, вы можете решить проблему наследования, которую не понимают старые браузеры, используя закон избыточности, который мы называем "Be Kind to Netscape 4".

body  {
     font-family: Verdana, sans-serif;
     }
p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

Браузеры 4.0 не понимают наследования, но они могут понять групповые селекторы. Хотя это может浪费 часть带宽 пользователей, но если нужно поддерживать пользователей Netscape 4, приходится это делать.

Инheritance - это проклятие?

Если вы не хотите, чтобы шрифт "Verdana, sans-serif" передавался всем подэлементам, что делать? Например, вы хотите, чтобы шрифт абзацев был Times. Нет проблем. Создайте особое правило для p, чтобы он摆脱 правил родителя:

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }