ID 中带有句点的 CSS 选择器

问题描述

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

The HTML spec allows for periods (.) in an id:

<img id="some.id"/>

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

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

#some.id { 颜色:#f00;}

ID 选择器的 CSS 规范没有提到这一点案件.所以我假设它使用标签名称和 类选择器?例如，a.className 的 CSS 规则将适用于类名为 className 的所有锚标记 (<a>)，比如 <a class="className"></a>.

The CSS spec for ID Selectors does not mention this case. So I assume it is using the combination of a tag name and class selector? For example, a CSS rule of a.className would apply to all anchor tags (<a>) with a class name of className, like <a class="className"></a>.

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

Is it possible to have an external CSS file rule that references an HTML element by its id that has a period in it?

我不希望因为 CSS 规范指定 CSS "标识符"不包括作为有效字符的句点.那么这是 HTML 和 CSS 规范之间的根本不匹配吗?使用不同类型的 CSS 选择是我唯一的选择吗?谁能比我更聪明地确认或否认这一点?

I expect not since the CSS spec specifies that a CSS "identifier" does not include the period as a valid character. So is this a fundamental mismatch between HTML and CSS specs? Is my only alternative to use a different type of CSS selection? Can anyone smarter than I confirm or deny this?

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

(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.)

推荐答案

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

After digging through the specs some more, I found the CSS spec does allow for backslash () escaping like most languages.

所以在我的示例中，以下规则将匹配:

So in my example, the following rule would match:

#some.id {
  color: #f00;
}

这篇关于ID 中带有句点的 CSS 选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！