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

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

a[rel="nofollow"]

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

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

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

a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]
2 58
css string css-selectors

2 ответа:

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

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

Unquoted attribute value validator

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

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

63

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

- 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

22