带有句点ID的CSS选择器

Question

HTML规范允许id：

中的句点（。）

<img id="some.id" />

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

#some.id { color: #f00; }

ID Selectors的CSS规范未提及此案例。所以我假设它使用了标记名称和class selector的组合？例如，a.className的CSS规则适用于类名为<a>的所有锚标记（className），如<a class="className"></a>。

是否有可能有一个外部CSS文件规则通过其中包含句点的ID来引用HTML元素？

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

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

Answer 1

经典。在仔细阅读了写下这个问题的所有规范后，我再读了一遍，发现有一个转义字符。我之前从未需要它，但CSS规范允许backslash (\) escaping像大多数语言一样。你知道什么？

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

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

Answer 2

你也可以使用img [id = some.id]]

此处有更多信息：http://www.w3.org/TR/selectors/#attribute-selectors

Answer 3

由于您使用的是id，因此还可以使用document.getElementById（）将id值作为常规字符串而不是CSS选择器进行检查。 例如以下工作也可以：

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

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