css权重值的顺序是什么?

html-css015

css权重值的顺序是什么?,第1张

1、!important,加在样式属性值后,权重值为 10000

2、内联样式,如:style=””,权重值为1000

3、ID选择器,如:#content,权重值为100

4、类,伪类和属性选择器,如: content、:hover 权重值为10

5、标签选择器和伪元素选择器,如:div、p、:before 权重值为1

6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

CSS权重是由四个数值决定,看一张图比较好解释:

从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表。

从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

important的权重为1,0,0,0

ID的权重为0,1,0,0

类的权重为0,0,1,0

标签的权重为0,0,0,1

伪类的权重为0,0,1,0

属性的权重为0,0,1,0

伪对象的权重为0,0,0,1

通配符的权重为0,0,0,0

<html>

<head>

<style type="text/css">

#left{color:black!important}         /*1,1,0,0*/

#container #left{color:red}         /*0,2,0,0*/

#left{color:green!important}       /*1,1,0,0*/

.container #left{color:blue}      /*0,1,1,0*/

</style>

</head>

<body>

<div class="container" id="container">

<span id="left">这到底是什么颜色啊?</span>

</div>

</body>

</html>

元素会被多个样式一层层作用,这就是层叠样式表的来源。如果多个样式作用在元素上就会产生优先级权重的问题。

零、属性后面使用!important,权重最大,会覆盖页面内任何位置定义的元素样式。

一、内联样式,权重为1000【写在HTML元素的style属性中】

二、ID选择器,权重为0100【非内联样式】

三、类、伪类、属性选择器,权重为0010【非内联样式】

四、标签、伪元素选择器,权重为0001【非内联样式】

五、通配符、子选择器、相邻选择器等,权重为0000【非内联样式】

六、继承的样式没有权重

注意

没有权重 权重为0 权重为0 的权重比 没有权重 的大,优先级高

1、 选择器中 ID选择器 的权重【a = 数量 * 权重】

2、 选择器中 类、伪类、属性选择器 的权重【b = 数量 * 权重】

3、 选择器中 标签、伪元素选择器 的权重【c = 数量 * 权重】

4、 最终的权重w = a + b + c

运行截图

width:宽度【块级元素的会继承父类的内容宽度contentwidth,】

color:字体的颜色