HTML5 中有效的 CSS id 选择器值是什么？ [复制]答案

【问题标题】：What are valid CSS id selector value in HTML5? [duplicate]HTML5 中有效的 CSS id 选择器值是什么？ [复制]
【发布时间】：2021-07-09 03:02:24
【问题描述】：

根据specs，我已满足所有条件，但 CSS 仍然不适用。

id 属性指定其元素的唯一标识符 (ID)。该值在元素的主子树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不得包含任何空格字符。

那么HTML5 中有效的id 值是什么？

#123123c{
  color: red;
}

&lt;div id="123123c"&gt; Hello DEVELOPERS solve this problem &lt;/div&gt;

【问题讨论】：

选择器的开头不能使用数字
@Fakt309 Specs 没有这么说
@decpk 你看看这个benfrain.com/…
@decpk w3.org/TR/CSS21/syndata.html#characters 4.1.3 Characters and case 第二个选项
知道了@Fakt309 和 James

标签： javascript html css

【解决方案1】：

让我帮你拿。如果有人可能会在这个问题上卡住

这是因为即使 HTML5 很乐意 ID 以数字开头，但 CSS 却不是。 CSS 根本不允许选择器以数字开头。规范的相关部分指出：

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

W3C 规范。

但是，您可以使用属性选择器轻松解决此问题：

[id="123123c"] {
  color: red;
}

&lt;div id="123123c"&gt; Hello DEVELOPERS solve this problem &lt;/div&gt;

【讨论】：

【解决方案2】：

id 选择器不能以数字开头...它必须以字母或下划线（_）开头

<!DOCTYPE html>
<html>
<head>
<style>
#_123123c {
  color: red;
}
</style>
</head>
<body>
<div id="_123123c"> Hello DEVELOPERS solve this problem </div>
</body>
</html>

【讨论】：