优先级

概念

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级是如何计算的？

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。

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

注意: 元素在文档树中的位置是不会影响优先级的。

选择器类型

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

①此列表是从英文版搬过来的：

0. 元素(类型)选择器（type selectors）（例如：h1）和伪元素选择器（pseudo-elements）（例如：:before）

1. 类选择器（class selectors） (例如：.example)，属性选择器（attributes selectors）（例如：[type="radio"]），伪类选择器（pseudo-classes）（例如：:hover）

2. ID选择器（例如：#example）

通用选择器（universal selector）(*),组合符合（combinators） (+, >, ~, ' ') 和否定伪类（negation pseudo-class）(:not()) 不会影响优先级（但是，在 :not() 内部声明的选择器是会影响优先级的）。

给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。.

`!important` 规则例外

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明,。尽管技术上 !important 与优先级毫无关系，但是它们之间直接相互影响。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

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

取而代之，你可以：

善用 CSS 的级联属性
使用更多具体的规则。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级：
```
<div id="test">
  <span>Text</span>
</div>
```
```
#test span { color: green }
span { color: red }
div span { color: blue }
```

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

什么时候应该使用：

A) 一种情况

你的网站上有一个设定了全站样式的CSS文件，
同时你（或是你同事）写了一些很差的内联样式。

在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。

活生生的例子比如：一些写得很糟糕的 jQuery插件里面使用的内联样式。

B) 另一种情况

#someElement p { color: blue; } p.awesome { color: red; }

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important ，第一条规则永远比第二条的优先级更高

怎样覆盖 !important

A)很简单，只需再添加一条带!important 的CSS规则，要么给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。

一些拥有更高优先级的例子：

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

B)或者使用相同的选择器，但是置于已有的样式之后：

td {height: 50px !important;}

C)或干脆改写原来的规则，以避免使用 ! important 。

https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

https://stackoverflow.com/questions/11178673/how-to-override-important

https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-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.

This text is in the inner div.

基于形式的优先级（Form-based specificity）

优先级是基于选择器的形式进行计算的。在下面的例子中，尽管选择器*[id="foo"] 选择了一个ID，但是它还是作为一个属性选择器来计算自身的优先级。

有如下样式声明:

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

将其应用在下面的HTML中:

<p id="foo">I am a sample text.</p>

最终会出现下面的效果:

I am a sample text.

虽然匹配了相同的元素，但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。

无视DOM树中的距离

有如下样式声明:

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

当它应用在下面的HTML时:

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

浏览器会将它渲染成:

Here is a title!

概念