CSS样式优先级


A. !important 无论出现在什么地方, 该样式都具有最高优先级. 含有!important的同级样式按照声明的顺序, 后出现的样式具有高优先级. (对于IE6有一些bug !important有时会被忽视, 对于JS控制的!important不同的浏览器也会有不同的表现, 具体请搜索css hack技巧)

B. 在元素内部的内联样式, 通过JS控制的内部样式由于相对CSS执行较晚, 即便顺序写在前面也比普通内联样式具有较高优先级.

C. 位于head标签内部的内部样式表, 通过链接得到的外部样式表. 这两位优先级相同, 相同选择器按照声明顺序, 后出现的样式具有高优先级.

无论选择器如何, 优先级都是 A > B > C .

C中不同的选择器优先级判断, 可以把某个样式看成[0,0,0]这样形式:

第一个数字为id选择器的总数
第二个数字为class选择器(含属性, 伪类)的总数
第三个数字为HTML元素(含伪元素)的总数

举例:

#header h1 - [1,0,1]
.container #header h1 - [1,1,1]
.container h1 - [0,1,1]
div h1 - [0,0,2]

比较时按第一位比较大小, 大的优先级大, 相同比较第二位, 以此类推.

“*” 通用选择器具有最低优先级.


发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注