1

我对以下代码有疑问：

#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

编辑：小提琴的两张图片（Chrome 中的 1 张和 Firefox 中的 1 张）：Chrome：

在此处输入图像描述

火狐：

在此处输入图像描述

4

1 回答 1

2

“#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 属性”中链接”段落。

于 2013-08-27T17:34:13.963 回答