css选择器优先级排序

css选择器优先级排序

!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS选择器都有权重值，权重值越大优先级越高。

1、内联样式表的权重值最高，值为1000。
2、id选择器的权重值为100。
3、class选择器的权值为10。
4、类型（元素）选择器的优先级为1。
5、通配符选择器的优先级为0。

html内容如下：

<div id="div_id1">
	这里是第一个div，!important优先级 比 行内样式/行间样式 优先级高
</div>
<div id="div_id2" style="background-color: red;">
	这里是第二个div，行内样式/行间样式 比 id 优先级高
</div>
<div id="div_id3" class="div_class">
	这里是第三个div，id优先级 比 class 优先级高
</div>
<div id="div_id4" class="div_class">
	这里是第四个div，属性选择器 id=["div_id4"] 优先级 和 class 优先级  一样高，看顺序。class在后面，展示class的样式
</div>
<div id="div_id5" class="div_class">
	这里是第五个div，属性选择器 id=["div_id5"] 优先级 和 class 优先级  一样高，看顺序。id=["div_id5"]在后面，展示id=["div_id5"]的样式
</div>
<div class="div_class">
	这里是第六个div，class 优先级 比 标签选择器 如：div/body/html/span等 优先级高
</div>
<div>
	这里是第七个div，标签选择器 优先级 比 通配符选择器 <strong style="background-color:chartreuse;color: red;">*</strong> 优先级高。因此，虽然整体页面的背景色展示为灰色，但第七个div的背景色仍为黄绿色
</div>

css内容如下：

#div_id1 {
	background-color: cornflowerblue !important;
}
#div_id2 {
	background-color: yellow;
}
#div_id3 {
	background-color: green;
}
[id="div_id4"] {
	background-color: aquamarine;
}
.div_class {
	background-color: blue;
}
[id="div_id5"] {
	background-color: aquamarine;
}
div {
	height: 80px;
	background-color: yellowgreen;
}
* {
	background-color: #eeeeee;
}

结果如下：