Question

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

<!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>

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

所以看起来你无法与数字属性相匹配。

有没有人知道为什么这......非常......有用......特征......存在？

Answer 1

将字符串换行以匹配引号...

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

jsFiddle

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

Source

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

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

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

Answer 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>

Answer 3

您认为属性不能以数字开头是正确的。

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

我认为对此的答案类似于为什么变量在大多数语言中不能以数字开头。（Why can't variable names start with numbers?）

“因为那时一串数字将是有效的标识符以及有效的数字”

我还会看到这个答案更多的答案为什么： Can XHTML and HTML class attributes value start with a number?

但是，对我而言，这是与SGML和解析并呈现HTML和CSS的词法分析器有关的历史后果的组合。

Answer 4

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

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

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

CSS选择器无法匹配数字属性值？为什么？

4 个答案: