Селекторы атрибутов CSS: правила для кавычек (", 'или нет?)

Question

Этот вопрос беспокоит меня уже некоторое время. При написании селектора CSS, который сравнивается с атрибутом элемента, вот так.

a[rel="nofollow"]

Я никогда не знаю, что мне делать с кавычками. Они действительно необходимы?

По сути, какова спецификация для этого, потому что я не могу найти ее на веб-сайте.

Все ли это считается действительным?

a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]

Answer 1

Я написал более подробно на эту тему здесь: Значения атрибутов без кавычек в HTML и CSS .

Я также создал инструмент, чтобы помочь вамответьте на свой вопрос: http://mothereff.in/unquoted-attributes

Вы можете опускать кавычки, если значение атрибута буквенно-цифровое (однако есть некоторые исключения -см. связанную статью для всех деталей).В любом случае, я считаю хорошей практикой добавлять кавычки в любом случае, если они вам нужны, то есть a[href^=http://] не сработает, но a[href^="http://"] сработает.

В статье, в которой я упоминал, есть ссылки на соответствующие главыв спецификации CSS.

Answer 2

Значения атрибута должны быть идентификаторами или строками

- http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Первые две строки использования.Третий использует идентификатор.

идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание (_);они не могут начинаться с цифры, двух дефисов или дефиса, за которыми следует цифра.

- http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

Строки могут быть записаны в двойных кавычках или содинарные кавычки.

- http://www.w3.org/TR/CSS2/syndata.html#strings