带有括号的CSS选择器和样式检查器中的某种索引

Question

在查看我使用Chrome DevTools分析的页面元素时，我看到以下奇怪的显示：

那是什么＆＃34;（1）＆＃34;到底？由于源是用户代理样式表，我无法进一步向下钻取。

在“元素”面板中，我看到了类似的怪异：

我认为CSS选择器名称中不允许使用括号。什么是上面使用的＆＃34; primaryNavId：（primaryLi1）＆＃34; ？

更新

＆＃34的更详细的屏幕截图，继承自＆＃34; line（样式窗格）：

当我点击＆＃34;继承自＆＃34;我在样式窗格中得到以下内容：

更新2 - FIREFOX检查：

Firefox在“元素”窗格中为相关项目显示相同的信息，但“样式”面板以不同方式显示，如下所示：

Answer 1

真是一团糟。现在我明白为什么你标记了你的原始问题（和这个问题）css-selectors。

首先，浏览器开发人员工具天真地假设类和ID不包含任何特殊的CSS选择器字符，因此可以用CSS选择器表示法表示而没有任何转义序列。所以你得到的东西是看起来像选择器，但仔细检查实际上是畸形的。您可以在每个浏览器的开发人员工具中看到相关证据。例如，在每个元素中，面包屑导航会将li元素列为li，后跟一个句点（对于类选择器），后跟类名，不带任何转义序列。显然，ID也是如此。

Google Chrome似乎对“继承自”标签使用了相同的表示法。 Firefox非常聪明，只能列出元素的元素类型（更容易预测），即“继承自li”，并显示实际样式规则和源CSS中的实际选择器，但其面包屑导航遇到同样的问题让它变得毫无意义。

然而，您在元素检查器中看到的不是选择器。这是一个HTML class属性。 语法规则完全不同。这就是为什么我说你之前链接的this answer of mine与你原来的问题完全无关。但我可以看到为什么你感到困惑，因为HTML和CSS密切相关，CSS有专门的类和ID选择器。 （我怀疑如果我们从一开始就被迫对所有属性使用带引号的属性选择器，那就不会有任何混淆 - 但是在CSS2之前，属性选择器甚至都没有。）

至于为什么“样式”窗格中反映的类名与元素检查器中反映的类名不同，原因尚不清楚。你要么完全检查不同的元素，要么正在发挥其他的作用（从看起来神秘的类名判断，它可能是一些时髦的客户端脚本框架巫术魔法）。