谁说css中id选择器权重一定比class“高”？

作者：管理员 2019-06-26 14:05:40 分类：HTML/CSS 阅读（5888） 3

在前端世界里，大家学完布局应该就脑子有个印象，觉得css世界中id的权重肯定是比class要高，事实一定如此吗？甚至很多人做了个比重打分划分，如下：

权重的等级

1
2
3
4
5
6

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

上面这段权重划分大家是最熟悉不过了，可能到这里还有人说我神经病，这没毛病啊。确实啊，正常情况下我们都是遵循这个规则，但是，下面这段代码，你能告诉我颜色1和颜色2的最终是表现什么颜色吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#header{
color:red;
}
.header{
color: blue
}
#header p{
color: #000;
}
.header p{
color: yellow
}
</style>
</head>
<body>
<div id="header">
<div class="header">
我的最终颜色1
<p>我的最终颜色2</p>
</div>
</div>
</body>
</html>

结果如下图：

小结

初步一看，很多人会想颜色1应该是红色，因为id选择器嘛，但其实仔细想想，你就不会那么认为，因为你想啊，假设我们在最外面的div加了一个id，给了一个颜色为red，那是否这个div下所有标签都给不了色值，甚至说必须前面带上#id > p等多级加权重形式？是否就很不合理了？到这里，我是不是可以说，css中，id也并不是什么时候权重都“高”于class呢？

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(2) 打赏

标签：

css权重

上一篇：Alt_Blog主题模板安装使用简易教程-附视频教程

下一篇：Vue.js替代vuex全局状态共享store的方案Observable-组件通信

谁说css中id选择器权重一定比class“高”？

权重的等级

结果如下图：

小结

相关推荐

共 3 条评论关于"谁说css中id选择器权重一定比class“高”？"

点击取消