Question

请您澄清为什么我的文件中的最后一条CSS规则styles.css被同一文件中的前一个条目覆盖？

这是Firebug输出：

padding-top
  (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行宣布，而我希望适用第3137行的规则（2）。

认为它与：not pseudo-selector有关，我将其删除，仍然观察到相同的行为。

我正在使用Drupal 7，我尝试使用和不使用CSS压缩和聚合运行。

我在以下浏览器中观察到此行为：

Firefox 25.0
Chrome 30.0.1599.114

Answer 1

很可能只是因为规则（1）的more specific selector比其他两个规则都要短。

规则（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 */

文件中的最后一个CSS规则被同一文件中的先前规则覆盖

1 个答案: