ID 中带句点的 CSS 选择器

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

<img id="some.id" />

However, using a CSS ID selector rule will 没有 match correctly:

#some.id { color: #f00; }

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

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

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

(I would remove the period from the HTML id attribute to simplify things, but it is a system-generated id, so I don't have the ability to change it in this case.)

39936 次浏览

小开

最佳答案

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

因此，在我的例子中，下面的规则将匹配:

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

小开

你也可以像这样使用 attribute selector:

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

小开

因为您使用的是 id，所以还可以使用 document.getElementById () ，它将 id 值作为普通字符串而不是 CSS 选择器进行检查。例如:

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

The only drawback is, you can't limit the scope of search, like you could with querySelector e.g. someElement.querySelector(). 但是由于 ID 应该始终是唯一的，因此在文档范围内使用 id 进行搜索是有效的。