css中选择器的优先级问题

最新推荐文章于 2025-12-21 17:43:01 发布

原创最新推荐文章于 2025-12-21 17:43:01 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #web #javascript #html5

本文详细解析了CSS中选择器的优先级规则，包括标签、类、ID选择器及!important声明的权重，并通过实例说明如何确定最终应用的样式。

css中选择器的优先级

选择器的类型

标签选择器权重为1
类选择器权重为10
id选择器权重为100
！important 权重为1000
因此优先级为：
！important > id > class > 标签

css 的引入方式

css有四种引入方式，其中优先级最高的是行内 > 内嵌的

当权重相同时，后面的优先级高于前面的优先级：后面 > 前面
例如：

 <style>
        a{color: red;}
        .div1 a{color: blue;}
        #p1 a{color: black;}
        div  a{color: coral;}
</style>
<div class="div1">
        <p id="p1">
            <a href="#">选择器</a>
        </p>
</div>

分析此题：
a{color: red;}的权重为1；
.div1 a{color: blue;}的权重为 10 + 1 =11
#p1 a{color: black;} 的权重为 100 + 1=101
div a{color: coral;} 的权重为1 + =2
因此最后的颜色是 #p1 a{color: black;} 的黑色