【问题标题】:Do values in CSS attribute selector values need to be quoted? [duplicate]CSS 属性选择器值中的值是否需要引用? [复制]
【发布时间】:2011-04-20 13:09:32
【问题描述】:

例如:

a[href="val"]

“val”是否需要在其周围加上引号?单人或双人都可以接受吗?整数呢?

【问题讨论】:

    标签: css css-selectors


    【解决方案1】:

    TLDR:除非值符合identifier specification for CSS2.1

    ,否则需要引用

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

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

    这不仅仅是因为句号或斜杠等非字母字符给这种独特的情况提供了引用要求 - 如果您只在“domain. com”

    好的,这里的每个答案都是错误的(包括我自己之前的答案。)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'。但是检查完整的域名是行不通的,因为它违反了标识符规则。

    【讨论】:

      【解决方案2】:

      根据CSS 2.1 specs 中的示例,引号是可选的。

      在下面的例子中,选择器匹配所有“class”属性的值为“example”的SPAN元素:

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

      这里,选择器匹配所有“hello”属性的值为“Cleveland”且“goodbye”属性的值为“Columbus”的所有SPAN元素:

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

      数字被视为字符串,即它们可以被引用,但它们不是必须的。

      【讨论】:

      • 啊.. 正在阅读 css3 规范,我看到的所有示例都使用引号。
      • 未加引号的值必须以字母开头。
      • @DaveSchweisguth [citation-needed]
      • “属性值必须是标识符或字符串 [引用]”:w3.org/TR/selectors/#attribute-selectors。 “标识符......不能以数字开头”:w3.org/TR/CSS21/syndata.html#value-def-identifier.
      • 这个答案并不完全正确......请参阅这个小提琴 ---> jsfiddle.net/k6avfo7k。使用属性和属性选择器(^=、$=、|=、=、*=)的各种组合,您会看到 CSS 会以例如 [name$=1] 中断,但会在 [name$="1 时恢复"]
      【解决方案3】:

      不,它们不必有引号,为了避免歧义,很多人确实使用引号,如果值包含空格,则需要引号。

      单引号或双引号都可以,整数会被同等对待(css没有字符串和整数的区别)。

      请参阅the spec 中的示例。

      【讨论】:

      • 这个答案并不完全正确......请参阅这个小提琴 ---> jsfiddle.net/k6avfo7k。使用属性和属性选择器(^=、$=、|=、=、*=)的各种组合,您会看到 CSS 会以例如 [name$=1] 中断,但会在 [name$="1 时恢复"]
      【解决方案4】:

      它们不需要被引用。

      字符串/双精度/整数之间也没有区别。 CSS isn't Turing-complete,更别提打字了。

      【讨论】:

      • 未加引号的值必须以字母开头。
      • 查看我对 Pekka 回答的评论。
      • 这个答案并不完全正确......请参阅这个小提琴 ---> jsfiddle.net/k6avfo7k。使用属性和属性选择器(^=、$=、|=、=、*=)的各种组合,您会看到 CSS 会以例如 [name$=1] 中断,但会在 [name$="1 时恢复"]
      猜你喜欢
      • 2013-09-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-08
      • 2020-01-02
      相关资源
      最近更新 更多