В CSS3, что означает запятая между блоками объявлений?

Да, да, мы все знаем, что означает запятая между селекторами.

Это другое. Я думал, что довольно хорошо знаю CSS, но сегодня я наткнулся на то, чего никогда раньше не видел - запятую между блоками объявлений. Я использовал clean-css, и он генерировал этот минимизированный, очищенный вывод (я повторно вставил некоторые пробелы для удобства чтения):

body .container
{
    color:#EEE
}
,
.navbar-default .navbar-nav>.active>a:hover,
h1
{
    color:#000
}

Обратите внимание на запятую (которую я поместил на отдельной строке) после закрывающей фигурной скобки в блоке объявлений для body .container, Это действительный CSS? Если так, что это значит?

Мой входной CSS для clean-css был следующим:

body .container {
  color: #EEEEEE;
}

h1{
  color: #000;
}

.navbar-default .navbar-nav > .active > a:hover, {
    color: black;
}

1 ответ

Решение

Нет, это не правильный CSS. Запятая в этой позиции означает, что перед ней стоит пустой селектор. Но пустой селектор вовсе не селектор; селектор должен содержать как минимум простой селектор или псевдоэлемент (с неявным *). Из спецификации:

Пустой селектор, не содержащий последовательности простых селекторов и псевдоэлемента, является недействительным селектором.

Это может быть результатом ошибки в clean-css. В качестве альтернативы входной CSS был недопустим для начала, и это было просто результатом попытки clean-css обработать его.

Другие вопросы по тегам