CSS层叠

首先，层叠采用以下重要度次序：

1. 标有!important的用户样式
2. 标有!important的作者样式
3. 作者样式
4. 用户样式
5. 浏览器/用户代理应用的样式

然后，根据选择器的特殊性决定规则次序。

选择器的分成四个成分等级：a、b、c、b

1. 如果样式是行内样式，那么a=1
2. b等于ID选择器总数
3. c等于类、伪类和属性选择器数量
4. d等于类型选择器和伪元素选择器数量

使用这些规则可以计算任何CSS选择器特殊性。

:not伪类例外

:not 否定伪类在优先级计算中不会被看作是伪类. 尽管如此, 在计算选择器数量时还是会把伪类当做普通选择器进行计数.

这是一块CSS代码:

div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}

 

当它被应用在下面的HTML时:

<div class="outer">
  <p>This is in the outer div.</p>
  <div class="inner">
    <p>This text is in the inner div.</p>
  </div>
</div>

会在屏幕上出现以下结果:

This is in the outer div. (orange)

This text is in the inner div. (lime)

 

大致如此。