Html ID 中带有句点的 CSS 选择器
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12310090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS selector with period in ID
提问by Jon Adams
The HTML spec allows for periods (.) in an id:
HTML 规范允许在 id 中使用句点 (.):
<img id="some.id" />
<img id="some.id" />
However, using a CSS ID selector rule will notmatch correctly:
但是,使用 CSS ID 选择器规则将无法正确匹配:
#some.id { color: #f00; }
#some.id { color: #f00; }
The CSS spec for ID Selectorsdoes 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>
.
ID 选择器的 CSS 规范没有提到这种情况。所以我假设它是使用标签名称和类选择器的组合?例如,CSS 规则 ofa.className
将适用于所有<a>
类名为 的锚标记 ( ) className
,例如<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?
是否可以有一个外部 CSS 文件规则,它通过包含句点的 id 来引用 HTML 元素?
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?
我希望不会,因为 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.)
(我会从 HTML id 属性中删除句点以简化事情,但它是系统生成的 id,因此在这种情况下我无法更改它。)
回答by Jon Adams
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 (\) escapinglike most languages. What do you know?
经典的。在挖掘了所有写问题的规范之后,我又通读了一些,发现有一个转义字符。我以前从不需要它,但 CSS 规范确实允许像大多数语言一样转义反斜杠 (\)。你知道什么?
So in my example, the following rule would match:
因此,在我的示例中,以下规则将匹配:
#some\.id { color: #f00; }
#some\.id { color: #f00; }
回答by SDD512
You could also use img[id=some.id]]
你也可以使用 img[id=some.id]]
More info here: http://www.w3.org/TR/selectors/#attribute-selectors
更多信息在这里:http: //www.w3.org/TR/selectors/#attribute-selectors