CSS样式（选择器）的优先级

最新推荐文章于 2025-05-19 20:15:25 发布

Doe

最新推荐文章于 2025-05-19 20:15:25 发布

阅读量8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # 一些知识点文章标签： css

原文链接：https://fecommunity.github.io/front-end-interview/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/CSS%E7%9B%B8%E5%85%B3/1.CSS%E5%9F%BA%E7%A1%80.html

一些知识点专栏收录该内容

48 篇文章

订阅专栏

本文解读CSS选择器的优先级规则，从!important到通配符，理解ID、类、标签选择器的权重，并通过实例演示不同情况下样式应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
第二等：ID选择器，如：#header，权值为0100.
第三等：类选择器、如：.bar，权值为0010.
第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
继承的样式没有权值。

CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他

<style>
    a{color: yellow;} /*权值：0,0,0,1*/
    div a{color: green;} /*权值：0,0,0,2*/
    .demo a{color: black;} /*权值：0,0,1,1*/
    .demo input[type="text"]{color: blue;} /*权值：0,0,2,1*/
    .demo *[type="text"]{color: grey;} /*权值：0,0,2,0*/
    #demo a{color: orange;} /*权值：0,1,0,1*/
    div#demo a{color: red;} /*权值：0,1,0,2*/
</style>

<body>
    <a href="">第一条应该是黄色</a> <!-适用第1行规则->
    <div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!-适用第4、5行规则，第4行优先级高->
    <a href="">第三条应该是黑色</a><!-适用第2、3行规则，第3行优先级高->
    </div>
    <div id="demo">
    <a href="">第四条应该是红色</a><!-适用第5、6行规则，第6行优先级高->
    </div>
</body>

原文：

1.2.1 CSS基础 · 前端工程师面试宝典