CSS学习笔记：优先级

一个规则的优先级按如下规则计算：

• a：ID选择器的数量
• b：类选择器、属性选择器、伪类选择器的数量
• c：元素选择器、伪元素选择器数量
• 忽略通配选择器*和结合符（+、>、~、’ ‘）
• 忽略否定伪类:not()，但在 :not() 内部声明的选择器是会影响优先级
• 内联样式总是会覆盖外部样式表的任何样式，因此可以看做拥有最高的优先级。

Examples:

*               /* a=0 b=0 c=0 -> specificity =   0 */
li              /* a=0 b=0 c=1 -> specificity =   1 */
ul li           /* a=0 b=0 c=2 -> specificity =   2 */
ul ol+li        /* a=0 b=0 c=3 -> specificity =   3 */
h1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
ul ol li.red    /* a=0 b=1 c=3 -> specificity =  13 */
li.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

<div id="test">
  <span>Text</span>
</div>

#test span { color: green }
span { color: red }
div span { color: blue }

无论你c​ss语句的顺序是什么样的，文本都会是绿色的(green)，因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）

注意，使用属性选择器来选择id与id选择器并不相同，前者拥有更高的优先级：

* #foo {
  color: green;
}
*[id="foo"] {
  color: purple;
}

! important

通过在分号前加入！important来标志某个声明非常重要，此声明将覆盖任何其他声明

p.drak{
    color:#333 !important;
    background:white;
}

如果一个属性包含多个关键词，则！important必须放在声明的最后：

p{
    color:yellow;
    font: smaller Times, serif !important;
}

！important总是比非重要规则权重高。