CSS Selector覆盖顺序

我们都知道CSS的定义是可以被覆盖的，但是覆盖的顺序可能并不清楚，本文的目的就在于介绍CSS的覆盖顺序。

三种类型CSS的优先级顺序

CSS有三种类型:

1. inline style：以style属性的形式直接写在标签上的

2. embedded style：写在html文件的<style></style>里的

3. external stylesheet：引用的外部css文件

这三种类型的CSS的优先级就是上面所讲的顺序。将通俗点就是inline style肯定会覆盖embedded style的定义，而embedded style肯定会覆盖external stylesheet的定义。

当然，如果引用多个external stylesheet的话，那么后面的也会覆盖前面的。

CSS selector之间的优先级顺序

以下是不同selector之间的优先级:

1. The ID selector，ID选择器。#a{...}

2. The attribute selector，属性选择器。a[target=_blank]{...}

3. The class selector，类选择器。.classa{...}

4. The child selector，子元素选择器。table > tr {...}

5. The adjacent sibling selector，相邻元素选择器。.classa + .classb {...}

6. The descendant selector，儿孙辈选择器。div td {...}

7. The type selector，元素类型选择器。input{...}

同样，在相同的选择器类型之间后面的会覆盖前面的定义。

终极覆盖法

!important关键字能够覆盖一切定义，无视前面提到的优先级顺序。

比如:color:red !important;。不论这段CSS写在什么地方，还是以什么selector出现，都会覆盖其他的CSS定义。

参考资料

1. http://www.w3.org/TR/selector...

2. http://www.alternategateways....