样式的优先级算法
原则一: 继承不如指定
原则二: #id> .class> 标签选择符
原则三: 越具体越强大
原则四: 标签 #id>#id ; 标签. class> .class
CSS 优先级权重计算法
CSS 优先级包含四个级别 (标签内选择符, ID 选择符, Class 选择符, 元素选择符) 以及各级别出现的次数!
根据这四个级别出现的次数计算得到 CSS 的优先级.
元素标签中定义的样式(Style 属性), 加 1,0,0,0
每个 ID 选择符(如 #id), 加 0,1,0,0
每个 Class 选择符 (如 .class), 每个属性选择符(如 [attribute=]), 每个伪类(如 :hover) 加 0,0,1,0
每个元素选择符 (如 p) 或伪元素选择符 (如 :firstchild) 等, 加 0,0,0,1
然后, 将这四个数字分别累加, 就得到每个 CSS 定义的优先级的值,
然后从左到右逐位比较大小, 数字大的 CSS 样式的优先级就高.
例子:
css 文件或 < style > 中如下定义:
- h1 {color: red;}
- / 一个元素选择符, 结果是 0,0,0,1 /
- body h1 {color: green;}
- / 两个元素选择符, 结果是 0,0,0,2 /
- h2.grape {color: purple;}
- / 一个元素选择符, 一个 Class 选择符, 结果是 0,0,1,1/
- li#answer {color: navy;}
- / 一个元素选择符, 一个 ID 选择符, 结果是 0,1,0,1 /
元素的 style 属性中如下定义:
- h1 {color: blue;}
- / 元素标签中定义, 一个元素选择符, 结果是 1,0,0,1/
如此以来, h1 元素的颜色是蓝色.
注意:
1,!important 声明的样式优先级最高, 如果冲突再进行计算.
2, 如果优先级相同, 则选择最后出现的样式.
3, 继承得到的样式的优先级最低.
来源: http://www.qdfuns.com/article/18271/2ce66adc2fab5923e2be34915be43122.html