可能是 chrome 中的 css 优先级错误？答案

【问题标题】：probably css priority bug in chrome?可能是 chrome 中的 css 优先级错误？
【发布时间】：2013-08-30 04:15:42
【问题描述】：

我对以下代码有疑问：

#access a, #access a:visited {
line-height: 2em;                 //<- Chrome uses these
padding: 0 1em;
}
#access ul ul a {
line-height: 1em;                 //<- Firefox uses these
padding: .5em .5em .5em 1em;
}

HTML 代码：

<nav role="navigation" id="access">
[...]
  <div [...]>
    <ul [...]>
      <li [...]> [...] </li>
      <li [...]> [...]
        <ul class="sub-menu">
          <li [...]> [...] </li>
        </ul>
      </li>
    </ul>
  </div>    
</nav>

哪个选择器的优先级更高？

#access a, #access a:visited

或

#access ul ul a   <- Is supposed to have the higher priority

两种浏览器中的一种（Firefox 或 Chrome）似乎对它们的解释是错误的

一个简单的解决方法是给第二个选择器一个类名

-> #access ul ul.sub-menu a  <- works for both

如果这可以被认为是一个错误，那么我会将其报告给 Mozilla/Google

编辑：两张 Fiddle 图片（1 张在 Chrome 中，1 张在 Firefox 中）：铬：

火狐：

【问题讨论】：

我刚刚创建了一个 jsFiddle，它显示 #access ul ul a 在 Chrome 中具有更高的优先级。如果我在复制您的问题时犯了错误，您可以自己创建一个吗？
按预期工作 jsfiddle.net/C8449/1 两个浏览器都使用 #access ul ul a
我已经用原始代码更新了它：jsfiddle.net/C8449/3，它又出现了；同样的错误，也许你知道怎么回事，我可以制作 Firebug 和 Chrome Console 的截图
有人知道吗？我已经向 Google 发送了反馈，但您怎么看？ Bug，还是没有？

标签： css google-chrome firefox

【解决方案1】：

“#access a:visited”比“#access ul ul a”具有更高的特异性。如果您在http://www.w3.org/TR/CSS21/cascade.html#specificity 运行算法，则前者的特异性为 (0, 1, 1, 1)，而后者的特异性为 (0, 1, 0, 3)。

您修改后的选择器（“#access ul ul.sub-menu a”）具有特异性（0、1、1、3）。

Firefox 忽略 :visited 规则中的 line-height 样式的原因在 http://dbaron.org/mozilla/visited-privacy 中进行了解释，特别是在“它限制了可用于设置已访问链接样式的 CSS 属性”段落中。

【讨论】：