Нужно ли заключать в кавычки значения в селекторе атрибутов CSS?

Question

например:.

a[href="val"]

Должны ли слова "val" заключаться в кавычки? Одиночные или двухместные приемлемы? Как насчет целых чисел?

Answer 1

TLDR: кавычки являются обязательными , если только значение не соответствует спецификации идентификатора для CSS2.1

Спецификация CSS могла бы сказать, что они необязательны, но реальный мир представляет другую историю. При сравнении с атрибутом href вам нужно будет использовать кавычки (одиночная или двойная работа в моем очень ограниченном тестировании - последние версии FF, IE, Chrome.)

Интересно, что ссылка на спецификацию css, на которую ссылается @Pekka, использует кавычки вокруг своих специфичных для href примеров.

И это не только из-за не альфа-символов, таких как точка или косая черта, которые придают этой уникальной ситуации требование кавычек - использование селектора частичного соответствия ~ = не работает, если вы просто используете «домен» в «домене». ком "

Хорошо, каждый ответ здесь неправильный (включая мой собственный предыдущий ответ). Спецификация CSS2 не проясняет, требуются ли кавычки в самой секции селектора, но спецификация CSS3 делает и цитирует правило как реализацию CSS21:

http://www.w3.org/TR/css3-selectors/

Значения атрибута должны быть идентификаторами CSS или строками. [CSS21] Чувствительность к регистру имен атрибутов и значений в селекторах зависит от языка документа.

А вот информация об идентификаторе:

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

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра. Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор "B & W?" может быть написано как "B \ & W \?" или "B \ 26 W \ 3F".

Мой ответ казался правильным, но это потому, что '~ =' является компаратором селектора пробелов, поэтому он никогда не будет соответствовать частичной строке внутри значения href. Однако компаратор '* =' работает. А частичная строка, такая как 'domain', работает для соответствия href = 'www.domain.com'. Но проверка на полное доменное имя не будет работать, потому что это нарушает правило идентификатора.

Answer 2

В соответствии с примерами из спецификации CSS 2.1 , кавычки не являются обязательными.

В следующем примере селектор сопоставляет все элементы SPAN, атрибут «class» которых имеет в точности значение «example»:

span[class=example] { color: blue; }

Здесь селектор сопоставляет все элементы SPAN, чей атрибут "привет" имеет в точности значение "Кливленд", а чей атрибут "до свидания" имеет именно значение "Колумб":

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Числа обрабатываются как строки, то есть их можно заключать в кавычки, но они не обязаны.

Answer 3

Нет, им не нужно иметь кавычки, хотя во избежание двусмысленности многие люди используют кавычки, которые необходимы, если значение содержит пробел.

Подойдут одинарные или двойные кавычки, и целые числа будут обрабатываться одинаково (css не различает строки и целые числа).

См. Примеры в спецификации.

Answer 4

Их не нужно указывать.

Также нет различия между строками / двойными числами / целыми числами. CSS не завершен по Тьюрингу , не говоря уже о наборе.