优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
选择器类型
选择器可以分成几个大类
①基本选择器
基本选择器是我们用的最多的选择器,包括:
1.元素(类型)选择器
2.类选择器
3.ID选择器
4.通用元素选择器②组合选择器
组合选择器包含了是包含了简单选择符的组合方式,包括:1.群组选择器
语法: 选择器A,选择器B{样式规则}
作用:对N个选择器获取的dom元素应用同一个样式,减少重复代码。
例如:
div,body{width: 1200px;}
2.后代选择器(派生选择器)
语法: 父选择器 后代选择器{样式规则}
作用:对父类元素中所有子代元素应该样式规则
例如:
body div{color: #888;}
3.子元素选择器(派生选择器)
语法: 父选择器 > 子元素选择器{样式规则}
作用:对父类元素的直接子元素应该样式规则
例如:
body > div{color: #888;}
4.相邻兄弟元素选择器
语法: 选择器A + 选择器B {样式规则}
作用:可选择紧接在另一元素后的元素,且二者有相同父元素
用法:这个选择器的有两种(本质上是一种),详细的用法点击这里5.兄弟选择器(派生选择器)
语法:选择器A ~ 选择器B{样式规则}
作用:对某个指定元素的后面的所有兄弟元素应用样式规则
例如:
body ~ div{color: #888;}
③属性选择器
例如:[attr=value]
④伪类选择器
例如::hover
⑤伪元素选择器
例如::before
计算规则
1.基本规则
行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
2.组合规则
选择器类型 | 纬度(a,b,c,d) |
---|---|
行内样式 | 1,0,0,0 |
ID选择器 | 0,1,0,0 |
类选择器、属性选择器、伪类选择器 | 0,0,1,0 |
元素(类型)选择器,伪元素(类型)选择器 | 0,0,0,1 |
通用元素选择器、伪类:not选择器 | 0,0,0,0 |
3.计算流程
(a)首先根据选择器类型计算出总纬度
(b)若纬度相同则比较来源
(c)若前两者相同,则后面声明的优先级高。
4.通过!important提高优先级
通过在样式规则后面添加!important关键词,可以将该样式规则提高到最高优先级。(IE5.5~6不支持)
!important
不是一个优雅的办法,而且会使得样式难以调试,下面是时是使用建议:
- 永远不要在全局CSS规则中使用;
- 永远不要在自制的插件中使用;
- 只在需要覆盖全局或外部插件的css规则(如Extjs、YUI插件的样式)的特定页面中才使用;
- 首先考虑使用优先级来解决问题而不是!important.
文章来源:http://www.cnblogs.com/fsjohnhuang/p/3940732.html
本文转载只转载其中的部分内容,有兴趣的同学可以去原地址查看详细的内容。