周期为ID的CSS选择器 [英] CSS selector with period in ID

问题描述

HTML规范允许ID中的句点（。）：

< img id =some.id/&

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

：

＃some.id {color：＃f00; }

ID选择器没有提到这种情况。因此，我假设它使用标记名称和类选择器？例如， a.className 的CSS规则将应用于所有锚标记（< a> ），类名 className ，如< a class =className>< / a> p>

有可能有一个外部CSS文件规则引用一个HTML元素，它的id有一个句点？

我不希望CSS规范指定CSS标识符不包括作为有效字符的周期。那么这是HTML和CSS规范之间的根本不匹配吗？是我唯一的选择使用不同类型的CSS选择吗？

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

解决方案

经典。只是在挖掘了所有的规范写的问题，我阅读通过它一些，发现有一个转义字符。我从来没有需要它，但CSS规范允许反斜杠（\）转义大多数语言。

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

＃some\.id {color：＃f00; }

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

<img id="some.id" />

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

#some.id { color: #f00; }

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

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

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?

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

解决方案

Classic. Just after digging through all the specs writing the question, I read through it some more and found there is an escape character. I've never needed it before, but the CSS spec does allow for backslash (\) escaping like most languages. What do you know?

So in my example, the following rule would match:

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

这篇关于周期为ID的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！