2css选择器的优先级-css选择器世界

html-css015

2css选择器的优先级-css选择器世界,第1张

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>