ID中带有句点的CSS选择器


97

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,因此在这种情况下,我无法更改它。)


您可以说这是HTML和CSS之间的根本不匹配。但是,由于它们是两种不同的语言,因此不希望它们匹配。HTML标识符是HTML标识符,而CSS标识符是CSS标识符。而且,CSS还可设置其他语言的样式,而不仅仅是HTML(尽管自然而然,CSS最初是为HTML制作的)。
BoltClock

3
#some.id正在使用ID和类选择器的组合。
BoltClock

ID是您作为样式挂钩拥有的唯一属性吗?我知道这有点题外话,但我想知道为什么您要使用ID而不是img或类(如果有)。
Jayx

@Jayx RE“为什么使用ID代替img(标签)或类?它因多种原因和情况而有所不同。但是在这种情况下,需要设置特定元素的样式,而不是页面上的所有图像。如果可以修改HTML,则可以使用一个类,但是在这种情况下,由于它是由我们无法控制的系统生成的,因此无法修改。
乔恩·亚当斯

Answers:


194

经典。在仔细研究了编写问题的所有规范之后,我通读了更多内容,发现其中有一个转义字符。我以前从未用过它,但是CSS规范确实允许像大多数语言一样转义反斜杠(\)。你知道什么?

因此,在我的示例中,以下规则将匹配:

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


8
好的研究工作。应该有更多这样的问答环节,而不是“写我的代码代替我”。
帕夫洛2012年

3
好研究。我只是在正在研究的大型企业应用程序中遇到过这种情况。我完全陷入了困境,之前从未见过。做一个带有句点的id有什么意义呢?
安东尼

1
@Anthony:没有特殊原因在HTML id属性中添加句点。我想有时候作者只是想?也许在某些情况下,它可能会从可能在服务器端代码的标识符中使用句点进行表单处理的基础实现系统中流失?我敢肯定,这样做的每个人都有自己的理由;但没有HTML / CSS包含它们的理由。
乔恩·亚当斯

1
谢谢,我在使用OpenLayers时遇到了问题,因为它的ID确实使用了点。例如:“ OpenLayers.Control.Attribution_7”。我猜这对内部代码有帮助,因为它们可以使javascript变量名称与id本身具有相同的值。
霍夫曼2014年

3
我当时正在考虑添加一个新问题并编写自己的答案,但决定在此处发表评论。如果使用手写笔预处理器,则需要使用两个反斜杠,例如,#some\\.id以转义特殊字符。第一个反斜杠由Stylus占用,其余的反斜杠保留在已编译的CSS中,从而实现了此答案中描述的所需结果。
markrian

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.