CSS 选择器不能匹配数字属性值？为什么？答案

【问题标题】：CSS selectors cannot match numerical attribute values? why?CSS 选择器不能匹配数字属性值？为什么？
【发布时间】：2011-06-06 02:02:36
【问题描述】：

我设置了一个简单的测试页面来说明我遇到的问题。简而言之，这可以按预期工作（文本格式为粗体，带下划线的红色）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc=x1] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc=x1>hello</div>
    </body>
</html>

这不会（文本保持黑色，未应用格式）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc=1] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc=1>hello</div>
    </body>
</html>

我在两个示例之间唯一更改的是属性值（在 CSS 和 HTML 中）从 x1 到 1。

看来你无法匹配数字属性。

有人知道为什么这个...非常...有用...功能...存在吗？

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

将要匹配的字符串用引号括起来...

[abc="1"] {
    ...
}

jsFiddle.

属性值必须是 CSS 标识符或字符串。

Source.

当你用引号括起来时，你告诉它匹配string。

当你不引用它时，它正在寻找identifier。

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)； 它们不能以数字开头、两个连字符或一个连字符后跟一个数字。

【讨论】：

谢谢。对不起，我不知道我怎么会错过这个！！我以为我已经用引号对其进行了测试，但在尝试使用引号时我一定跳过了一些东西。当它发生时我不喜欢它，我很谦卑并感谢你和其他人向我指出这一点。

【解决方案2】：

它适用于字符串周围的"" 引号。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style>
            [abc="1"] {
                color: red;
                text-decoration: underline;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div abc="1">hello</div>
    </body>
</html>

【讨论】：

【解决方案3】：

你意识到属性不能以数字开头是正确的。

为什么它可能在某些浏览器中正常工作，但可能不应该。

我认为这个问题的答案类似于为什么在大多数语言中变量不能以数字开头。 (Why can't variable names start with numbers?)

“因为这样一串数字既是一个有效的标识符，也是一个有效的数字”

我也会看到这个答案以了解更多关于原因的答案： Can XHTML and HTML class attributes value start with a number?

但是，对我来说，这是与 SGML 以及解析和呈现 HTML 和 CSS 的词法分析器相关的历史后果的组合。

【讨论】：

【解决方案4】：

Html 属性是字符串。问题可能与 css 解释器如何解释未引用的数字有关。它会将其识别为数字而不是字符串，因此它永远无法匹配 html 属性的字符串值。

您需要将要搜索的值括在引号中，以便将其正确解释为字符串，如前所述。如果值以非数字字符开头，它将被标记为字符串，这就是第一个示例有效的原因。

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

【讨论】：