CSS 的优先级机制总结

一、样式优先级：

　　多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。

　　一般情况下，大家都认为优先级是：内联样式 > 内部样式 > 外联样式，实际上不是如此，内部样式和外联样式优先级一样（看谁在先后的问题）：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如果内部样式放在外部样式的后面，则内部样式将覆盖外部样式。

二、选择器优先级

　　最高：内联样式 > id > class > 标签选择器

　　1.  内联样式表的权值最高 1000；

　　2.  ID 选择器的权值为 100

　　3.  Class 类选择器的权值为 10

　　4.  HTML 标签选择器的权值为 1

　　5. 后代选择器则利用选择器的权值进行计算比较，示例如下：

复制代码
<html>
<head>
<meta charset="utf-8">
    <title>无标题页</title>
    <style type="text/css">
        #redP p {/* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
        #redP .red em {/* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
        }
        #redP p span em {/* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
</head>
<body>
    <div id="redP">
        <p class="red">red/* 红色 */
           <span><em>em red</em></span> /* 蓝色 */
        </p>
        <p>red</p>/* 红色 */
    </div>
</body>
</html>
复制代码

三、CSS 优先级法则：

　　A  选择器都有一个权值，权值越大越优先；

　　B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

　　C  创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

　　D  继承的CSS 样式不如后来指定的CSS 样式；

　　E  标有“!important”规则的优先级最大：当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明,，无论它处在声明列表中的哪个位置.。尽管如此， !important规则还是与优先级毫无关系，使用 !important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

<style type="text/css">
    #redP p{   /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
    }
</style>

　　怎样覆盖掉 !important：很简单，你只需要：

　　（1）再加一条!important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、class或id选择器）上；

　　（2）或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

 

posted @   古兰精  阅读(599)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae