css优先级有6级。
0级:通配选择器、选择符和逻辑组合伪类。
通配选择器是 * 。
选择符有+、-、~、空格和 || 。
逻辑组合伪类有 :not()、:is()和 :where。这些伪类影响优先级的是括号里的选择器。
eg: :not([rel=nofollow])
1级:标签选择器。
2级:类选择器、属性选择器和伪类。
3级:ID选择器
4级:内联选择器
5级:!important
(1)数值计算法
0级--优先级为0;
1级--优先级为1;
2级--优先级为10;
3级--优先级为100。
(2)后来居上
优先级数值相同情况下,越后面优先级越高。
1.增加css选择器优先级的方法
(1)重复选择选择器自身
.foo.foo {}
(2)借助必然会存在的属性选择器
.foo[class] {}
#foo[id] {}
除了这两种方法,常用的是增加父级嵌套和增加标签选择器,但这种方法增加了耦合,降低了可维护性,不建议使用。
2.数值计算法的点评
不同级别的选择器优先级差距并不是10比1,差距比这大得多,而是因为实际开发中不会连续写10个而已。
在ie浏览器下,256个类选择器的优先级大于id选择器的优先级,原因是类名是以8字节存储的,8字节所能容纳的最大值就是255.
除了ie外,其他都使用16进制,不会出现这种情况。
了解css选择器的优先级后,日常工作就知道是怎么回事了。
是因为默认的优先级高于设置的优先级,所以显示不正确。
关于CSS选择器,首先请看这里: CSS 选择器参考手册
通过以上,我们可以将CSS选择器分为以下几种:
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例:
说明:以下E表示元素,attr表示属性,val表示属性的值。
说明:以下E表示元素
示例:
示例:
示例:
示例:
E:not(s) ,匹配不符合当前选择器的任何元素
示例:
E:target ,匹配文档中特定"id"点击后的效果
示例:
这里我们简单讨论下后代元素选择器和子元素选择器的区别
示例
CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。
多重样式(Mutiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是多重样式的使用情况。
一般情况下,( 外部 样式)External style sheet <( 内部 样式)Internal style sheet <( 内联 样式)Inline style
例外 :如果外部样式放在内部样式的后面,则外部样式将会覆盖内部样式。
示例:
给不同的选择器分配不同的权值
解释:
示例
结果:标签内的数据显示为蓝色。
比较样式的优先级是,只需统计不同选择器的个数,然后与对应的权值相乘即可。根据结果便可得出优先级。
看到这里,有些同学是不是对!important有点迷惑呀 为什么有了它,就优先级最高呐 下面我们再来详细讲一讲!important~
!important 是CSS1就定义的语法,作用是提高指定样式的应用优先权。
语法格式: {cssRule !important} ,即写在定义的最后面,例如: box { color: red !important}
声明了 !important 的样式,具有最高的优先级,相当于写在最下面(最后定义)
IE 6.0 不完全 支持!important
IE支持重定义中的!important,例如:
你将会发现定义了样式 class="yuanxin" 时,在IE下,字体显示为红色(#e00)。
但不支持同一定义中的 !important 。例如:
此时在IE6下不支持,你将会发现定义了样式 class="yuanxin" 时,字体显示为黑色(#000)。
解释 :
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为!important优先级较高,否则当含!important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为!important较低!
再举一个例子:
因为IE 6.0一直都不完全支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important,我们可以针对IE和非IE浏览器设置不同的样式,只要在非IE浏览器样式的后面加上!important。
完。
总结内容参考以下:
w3school_CSS 选择器参考手册
阮一峰_CSS选择器笔记
css选择器优先级深入理解
CSS 的优先级机制[总结]
十分感谢你们的分享 n(*≧▽≦*)n
注:原文章首发于: CSS选择器、优先级以及!important知识总结 ,现迁移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>