Контекстные селекторы в CSS2
Мне интересно, зачем стилизовать элемент в определенном классе, например:
.reddish H1 { color: red }
показан как пример правильного синтаксиса в спецификации CSS1 в разделе Контекстные селекторы:
Каскадные таблицы стилей, уровень 1
но это не показано в качестве примера в спецификации CSS2:
Каскадные таблицы стилей, уровень 2
По крайней мере, я не могу найти такого примера. Изменились ли правила синтаксиса для этого в CSS2, или это просто выводится как правильный синтаксис?
Ответы 2
Этот синтаксис правильный, но пример мог измениться по нескольким причинам.
Во-первых, не рекомендуется называть классы по описанию того, что они делают. В случае .reddish h1 пример CSS показывает, что он должен быть окрашен в красный цвет. Однако, если в более поздних изменениях дизайна h1 должен быть синим, тогда
.reddish h1 { color: blue; }
имеет мало смысла. Вы должны называть свои классы по их функциям или назначению на странице, а не по стилю, который они должны представлять.
Во-вторых, не рекомендуется использовать ключевые слова для цветов, так как цвет, который вы получаете, зависит от интерпретации браузера. Вместо «красный» вы должны использовать шестнадцатеричный код «# ff0000», чтобы получить точный цвет во всех браузерах. (красный может быть здесь не лучшим примером, но есть несколько странных ключевых слов о цвете).
Хотя ни одна из этих вещей не так уж плоха, они оба могут объяснить, почему пример был изменен в спецификации.
Вы должны писать элементы строчными буквами (h1, а не H1).