html - ID 中带有句点的 CSS 选择器

Question

HTML 规范允许在 id 中使用句点 (.)：

<img id="some.id" />

但是，使用 CSS ID 选择器规则将无法正确匹配：

#some.id { color: #f00; }

ID 选择器的 CSS 规范没有提到这种情况。所以我假设它使用标签名称和类选择器的组合？例如，CSS 规则a.className将适用于<a>类名为 的所有锚标记 ( ) className，例如<a class="className"></a>.

是否有可能有一个外部 CSS 文件规则通过其 id 引用一个 HTML 元素，其中有一个句点？

我不希望因为 CSS 规范指定 CSS“标识符”不包含句点作为有效字符。那么这是 HTML 和 CSS 规范之间的根本不匹配吗？使用不同类型的 CSS 选择是我唯一的选择吗？比我更聪明的人可以确认或否认这一点吗？

（我会从 HTML id 属性中删除句点以简化操作，但它是系统生成的 id，因此在这种情况下我无法更改它。）

Answer 1

在深入研究了规范之后，我发现 CSS 规范确实允许像大多数语言一样转义反斜杠 ( \) 。

因此，在我的示例中，以下规则将匹配：

#some\.id {
  color: #f00;
}

Answer 2

你也可以像这样使用属性选择器：

[id='some.id'] {
  color: #f00;
}

Answer 3

由于您使用的是 id，因此您还可以使用 document.getElementById() 将 id 值检查为普通字符串而不是 CSS 选择器。例如，以下也适用：

const myElem = document.getElementById("some.id");

唯一的缺点是，您不能像使用 querySelector 那样限制搜索范围，例如 someElement.querySelector()。但是由于 ID 应该始终是唯一的，因此使用 id 进行文档范围的搜索是有效的。