详解 CSS 属性 - 优先级问题

当你将一个样式添加到元素上却发现不起做用时，那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢，下面我总结了一些解决 CSS 优先级问题的经常使用法则。

样式距离

咱们能够经过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式，此时的优先级是:

外部样式 < 内部样式 < 内联样式

这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如：

<style type="text/css">
  div{color:blue;} //内部样式
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)
<div style="color:red">my color</div>//内联样式

此时显示的优先级是 red > blue > green。因此 my color 显示为红色。

特殊的计算方法

假设有下面这段代码：

<style type="text/css">
  div p.classSelector {color: blue}
  #idselector p {color: red}
</style>
<div id="idSelector">
  <p class="classSelector">my color</p>
</div>

咱们面对下面的 css，如何判断优先级呢？

<style type="text/css">
  div p.classSelector {color: blue}
  #idselector p {color: red}
</style>

这里介绍一种特殊的计算方法：

• 元素, 伪元素: 1 – (0,0,0,1)
• 类, 伪类, 属性: 1 – (0,0,1,0)
• ID: 1 – (0,1,0,0)
• 内联样式: 1 – (1,0,0,0)

这里的属性指的是：

效果以下：

优先级从上往下依次增长，至于如何计算，一样举例说明：

• p: 1个元素– (0,0,0,1)
• div: 1个元素 – (0,0,0,1)
• #idSelector: 1个ID – (0,1,0,0)
• div#idSelector: 1个元素, 1个ID – (0,1,0,1)
• div#idSelector p: 2个元素, 1个ID– (0,1,0,2)
• div#idSelector p.classSelector: 2个元素, 1个类, 1个ID – (0,1,1,2)

因此如今咱们再来看上面的例子：

div p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)
  #idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

因为优先级上 (0,1,0,1) > (0,0,1,2)，因此咱们知道最后显示的颜色为红色。

继承

继承是个比较好理解的概念，即子元素会继承父元素的样式。例如：

<div style="color:red">
  <p>my color</p>
</div>

上例中的 span 会继承父元素 div 的样式。但不是全部的属性都会默认使用继承的方式，好比 margin 和 padding 属性。例如：

<div style="margin:10px;padding:10px">
  <p>my color</p>
</div>

此时，元素 p 并不会继承父元素 div 的 margin 和 padding 样式，除非你这么作：

<div style="margin:10px;padding:10px">
  <p style="margin:inherit;padding:inherit">my color</p>
</div>

总结

1.首先找到全部做用在元素上的样式。（不要忽略来自继承的样式）
2.计算样式的做用距离，距离越近，优先级越大。
3.使用特殊的计算方法来判断同距离内的样式。
4.若是计算后的结果相同，那么后声明的样式覆盖先前声明的样式。
5.若是某个样式中设置 !important，则不管它的优先级如何，都以该样式为准。（除非无可奈何，强烈不建议使用这个方法，由于这无疑是不符合 css 思想的用法）

参考

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/