CSS选择器优先级
2016-03-31
#css
#css选择器
#css选择器优先级
前段时间搬家了 然后隔壁搬来了一个前端妹纸,
然而跟着妹纸学到了很多知识,比如:本文,嘿嘿嘿你懂得~
问题
有如下html代码:
ALink
如果设置css样式:
#b a{
color:red;
}
#a{
color: green;
}
问题:#b a
生效,还是#a
生效~
然而我的回答是:#a
但是结果是:
呵呵
原理
以下全部是我家隔壁那个亲爱的可爱的萌萌哒的前端妹纸科普的知识,
css的选择器优先级分别为:
- 标签选择器:1
- 类选择器:10
- ID选择器:100
现在来解释上面为何打脸了,
因为#b a
中选择器权重一共是101
,而#a
的权重为100
故#b a
生效。
特例
如果我们给#a
的css后加上!important
那么#a
的优先级变为最高,甚至比在html标签上加style的优先级还要高。
比如如下代码:
CSS Test
#a{
color: green !important;
}
ALink
显示的结果是加了!important
设置的颜色
感谢我家隔壁的前端妹纸,给我科普前端知识~
FROM : hackersb | Author:王松
- 左青龙
- 微信扫一扫
- 右白虎
- 微信扫一扫
评论