CSS学习笔记:优先级
2016-07-24 11:08
316 查看
一个规则的优先级按如下规则计算:
a:ID选择器的数量
b:类选择器、属性选择器、伪类选择器的数量
c:元素选择器、伪元素选择器数量
忽略通配选择器*和结合符(+、>、~、’ ‘)
忽略否定伪类
内联样式总是会覆盖外部样式表的任何样式,因此可以看做拥有最高的优先级。
当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
无论你css语句的顺序是什么样的,文本都会是绿色的(green),因为这一条规则是最有针对性、优先级最高的。(同理,无论语句顺序怎样,蓝色(blue)的规则都会覆盖红色(red)的规则)
注意,使用属性选择器来选择id与id选择器并不相同,前者拥有更高的优先级:
如果一个属性包含多个关键词,则!important必须放在声明的最后:
!important总是比非重要规则权重高。
a:ID选择器的数量
b:类选择器、属性选择器、伪类选择器的数量
c:元素选择器、伪元素选择器数量
忽略通配选择器*和结合符(+、>、~、’ ‘)
忽略否定伪类
:not(),但在 :not() 内部声明的选择器是会影响优先级
内联样式总是会覆盖外部样式表的任何样式,因此可以看做拥有最高的优先级。
Examples: * /* a=0 b=0 c=0 -> specificity = 0 */ li /* a=0 b=0 c=1 -> specificity = 1 */ ul li /* a=0 b=0 c=2 -> specificity = 2 */ ul ol+li /* a=0 b=0 c=3 -> specificity = 3 */ h1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */ ul ol li.red /* a=0 b=1 c=3 -> specificity = 13 */ li.red.level /* a=0 b=2 c=1 -> specificity = 21 */ #x34y /* a=1 b=0 c=0 -> specificity = 100 */ #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
<div id="test"> <span>Text</span> </div>
#test span { color: green } span { color: red } div span { color: blue }
无论你css语句的顺序是什么样的,文本都会是绿色的(green),因为这一条规则是最有针对性、优先级最高的。(同理,无论语句顺序怎样,蓝色(blue)的规则都会覆盖红色(red)的规则)
注意,使用属性选择器来选择id与id选择器并不相同,前者拥有更高的优先级:
* #foo { color: green; } *[id="foo"] { color: purple; }
! important
通过在分号前加入!important来标志某个声明非常重要,此声明将覆盖任何其他声明p.drak{ color:#333 !important; background:white; }
如果一个属性包含多个关键词,则!important必须放在声明的最后:
p{ color:yellow; font: smaller Times, serif !important; }
!important总是比非重要规则权重高。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- css如何搞正方形
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- 设计更快的网页(三):字体和 CSS 调整