css中样式style的优先级

css中样式有一下几种方式

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>

第一类别是按照标签名称来当作过滤器的，此处body的标签的内容会使用上面的样式

第二类是使用ID名称来当作过滤器的，只有Id="orange-text"的才会使用该样式

第三类是使用class来当作过滤器，

还有一种就是内联式的样式，如下：

<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

通过实验此处Hello World的颜色是白色，并且是黑底色（body的颜色）

所以得出一个结论优先级别为：内联式>ID>class

在ID和class的样式有多个时候，顺序从上到下，优先级别依次增大

最后，最大的boss是这个关键字：!important.一定会确保引用这个样式的代码段使用这个样式，如果在以上代码的一部分修改为：

.pink-text {
color: pink !important;
}

然后不管是引用了ID样式还是内联式的，最终显示的字体颜色依然是粉色