Пробелы в селекторах CSS

Question

В селекторе пробел может указывать потомка. Тем не менее, я вижу, пробелы также можно игнорировать.

Из моего тестирования вот что я думаю:

• Пробелы могут быть использованы вокруг , и контекстные символы (такие как + а также >).
• Пробелы нельзя использовать вокруг псевдокласса и символов элемента (: а также ::), а также селекторы атрибутов ([…]).
• Пробелы нельзя использовать с символами класса и id (. а также #).
• Пробелы внутри "строки" имеют большое значение.
• Все остальные пробелы игнорируются. Это включает заполнение внутри селектора атрибута.

Вопрос (а) это официально правильно? и (б) где это покрыто?

Answer 1

Все ваши выводы верны. В моем ответе на этот вопрос есть нюансы в отношении пробелов в атрибутах.

Все точные правила того, где пробелы могут появляться или не появляться, описаны в грамматике. Для целей грамматики, "контекстные символы (такие как + а также >)"на которые вы ссылаетесь, официально называются комбинаторами. (Термин" контекстный селектор "был впервые использован в CSS1, но с тех пор не появлялся.)

Кроме того, помните, что любое количество смежных пробельных символов, которые разделяют два простых селектора, считается комбинатором-потомком, что фактически является одной из причин, по которой пробельные символы "запрещены" вокруг разделителей для псевдоэлементов, псевдоклассов, селекторов атрибутов, селекторы класса и селекторы идентификаторов - потому что он имеет значение и, следовательно, его присутствие меняет значение селектора.