1

您能否解释一下为什么我的文件 styles.css 中的最后一个 CSS 规则会被同一文件中的前一个条目覆盖？

这是 Firebug 的输出：

填充顶部
  (1) .top-bar-section li a:not(.button) 0px styles.css?mvsvc7 (line 2666)
  (2) .top-bar-section ul li > a 1px styles.css?mvsvc7 (line 3137)
  (3) .top-bar-section ul li > a 12px styles.css?mvsvc7 (line 2457)

规则 (1) 最终被应用，但它是在第 2666 行声明的，而我希望规则 (2) 在第 3137 行应用。

认为它与 :not 伪选择器有关，我将其删除，但仍然观察到相同的行为。

我正在使用 Drupal 7，我尝试在有和没有 CSS 压缩和聚合的情况下运行。

我在以下浏览器上观察到这种行为：

  • 火狐 25.0
  • 铬 30.0.1599.114
4

1 回答 1

4

很可能只是因为规则 (1) 的选择器比其他两条规则更具体。

规则（1）中选择器的特异性计算如下：

.top-bar-section li a:not(.button) /* 2 classes, 2 types -> specificity = 0-2-2 */

并且规则（2）中选择器的特殊性是：

.top-bar-section ul li > a         /* 1 class, 3 types   -> specificity = 0-1-3 */

请注意，>和空格之类的组合子不会以任何方式影响特异性。li a并且li > a同样具体。

由于第一个选择器中有更多的类选择器（:not()伪类算作一个类，因为它的参数 ,.button是一个类选择器），它更具体，因此该规则优先。

我不清楚为什么删除:not()选择器仍然会导致它优先，因为这样做应该使它不如你的最后一条规则具体，因为结果如下：

.top-bar-section li a              /* 1 class, 2 types   -> specificity = 0-1-2 */
于 2013-11-05T17:27:14.443 回答