CSS选择器及优先级

这篇文章写得很清晰： http://www.demix.com.cn/blog/?p=34

 

最近一直被两个东西搞得很烦。一个是JavaScript的闭包，另外一个就是CSS选择器的优先级问题。

网上很多都是用一种数位计算法来进行优先级的比较。其实这样有些大题小作了一点。一个是模型不形象，比较难记，二者那种方法其实就是下面要所的优先级排序的具体化。

通常我们可以将CSS的优先级由高到低分为六组：

1. 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2. 第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3. 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
4. 第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
5. 第五级由一个或多个 类型选择器定义。如 div{margin:6px;}  覆盖  *{margin:10px;} 。
6. 最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。

另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如 #i100 *.c20 *.c10{} 的优先级就会高于 #i100 *.c10 div p span em{} ，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。

CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2. 第二级的优先属性由位于 <style/>标签中的 @import 引入样式表所定义。
3. 第三级的优先属性由<link/>标签所引入的样式表定义。
4. 第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
5. 第五级优先的样式有用户设定。
6. 最低级的优先权由浏览器默认。

理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。 

PS:以上学习于Pro CSS and HTML Design Patter