css权重及优先级问题

几个值的对比

  • 初始值
  • 指定值
  • 计算值
  • 应用值

CSS属性的 指定值 (specified value)会通过下面3种途径取得：

  1. 在当前文档的样式表中给这个属性赋的值，会被优先使用。
  2. 如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值。
  3. 如果上面的两种途径都不可行，则把CSS规范中针对这个元素的这个属性的初始值作为指定值

应用值（used value）是完成所有计算后最终使用的值。计算出CSS属性的最终值有三个步骤。

  • 首先，指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。
  • 然后，按规范算出 计算值computed value。
  • 最后，计算布局(尺寸比如 auto 或 百分数 换算为像素值 )， 结果即 应用值used value。
  • 这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle 获得最终的应用值。

CSS 2.0 只定义了 计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值，这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。 对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样，否则就会不一样

优先级

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。

如果优先级相同，靠后的 CSS 会应用到元素上。

下列是一份优先级逐级增加的选择器列表：

  • 通用选择器（*）
  • 元素(类型)选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

!important 规则例外 Link

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此,!important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

  • Never 永远不要在全站范围的 css 上使用!important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用!important
  • Never 永远不要在你的插件中使用!important
  • Always 要优化考虑使用样式规则的优先级来解决问题而不是!important

怎样覆盖掉 !important

  • 很简单，你只需要再加一条 !important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、类或 ID 选择器）上；
  • 或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

:not 伪类例外

:not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数.

无视DOM树中的距离

有如下样式声明:

body h1 {
  color: green;
}
html h1 {
  color: purple;
}

当它应用在下面的HTML时:

<html>
<body>
  <h1>Here is a title!</h1>
</body>
</html>

浏览器会将它渲染成purple，即后面的优先级更高

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

可替换元素

CSS 里，可替换元素是这样一些元素， 其展现不是由CSS来控制的。这些外部元素的展现不依赖于CSS规范。 典型的可替换元素有 <img>、 <object>、 <video> 以及 <textarea>、 <input> 这样的表单元素。 一些元素，比如 <audio> 和 <canvas> ，只在一些特殊情况下是可替换元素。 使用了 CSS content 属性插入的对象被称作匿名的可替换元素。

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和处理值为 auto 的情况。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线，会被一些 CSS 属性用到，比如 vertical-align。

LINKS