CSS 属性选择器值中的值是否需要引用?

mpe*_*pen 5 css css-selectors

例如:

a[href="val"]
Run Code Online (Sandbox Code Playgroud)

“val”需要在它周围加上引号吗?单人还是双人都可以接受?对于整数呢?

Mar*_*ope 3

TLDR:除非值符合CSS2.1 的标识符规范,否则需要引号

CSS 规范可能会说它们是可选的,但现实世界却呈现出不同的情况。当与 href 属性进行比较时,您需要使用引号(在我非常有限的测试中,单引号或双引号有效 - 最新版本的 FF、IE、Chrome。)

有趣的是,@Pekka 引用的 css 规范链接恰好在其特定于 href 的示例周围使用了引号。

这不仅仅是由于句点或斜杠等非字母字符给这种独特的情况带来了引号要求 - 如果您只使用“domain.com”中的“domain”,则使用部分匹配选择器 ~= 不起作用

好吧,这里的每个答案都是错误的(包括我自己之前的答案)。CSS2 规范没有澄清选择器部分本身是否需要引号,但 CSS3 规范确实如此,并将该规则引用为 CSS21 实现:

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

属性值必须是 CSS 标识符或字符串。[CSS21] 选择器中属性名称和值的区分大小写取决于文档语言。

这是标识符信息:

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

在 CSS 中,标识符(包括选择器中的元素名称、类和 ID)只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高版本,加上连字符 (-) 和下划线 ( _); 它们不能以数字、两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码(请参阅下一项)。例如,标识符“B&W?” 可以写成“B\&W\?” 或“B\26 W\3F”。

我的答案似乎是正确的,但那是因为 '~=' 是一个空白选择器比较器,因此它永远不会匹配 href 值内的部分字符串。然而,“*=”比较器确实可以工作。像“domain”这样的部分字符串确实可以匹配 href='www.domain.com'。但检查完整域名是行不通的,因为它违反了标识符规则。