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

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

a[rel="nofollow"]

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

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

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

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

Ответ 1

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

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

Unquoted attribute value validator

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

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

Ответ 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