CSS的三大特性：层叠、继承与优先级

CSS作为网页设计的核心语言，其三大核心特性------层叠性 、继承性 和优先级共同构成了样式表现的底层逻辑。理解这些特性将帮助开发者写出更优雅、更易维护的样式代码。

一、层叠性（Cascading）

1.1 核心概念

"层叠"指多个样式规则同时作用于同一元素时，浏览器通过特定规则确定最终样式的过程。这种特性如同透明薄膜的叠加，最终呈现综合效果。

1.2 层叠规则

相同的属性会覆盖，后面的CSS属性会覆盖前面的CSS属性
不同的属性会叠加，不同的CSS属性都会生效

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <style>
        div{
            /* 相同的属性会覆盖 */
            color: red;
            /* 不同的属性会叠加 */
            font-size: 50px;
        }
        div{
            color: rebeccapurple;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- 覆盖和叠加 -->
    <div>我是div盒子属性</div>
</body>
</html>

运行结果：

二、继承性（Inheritance）

2.1 基本规则

子元素自动继承父元素的某些样式属性，主要涉及文本相关属性：

可继承属性示例：

font-family, font-size
color, text-align
line-height, list-style

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS三大特性</title>
    <style>
        body{
            color:rgb(37, 66, 66);
            font-size: 30px;
            background-color:rgb(238, 238, 238);
            font-weight:700 ;
            font-family: "宋体";
        }
    </style>
</head>
<!-- 继承性：子级默认继承父级的文字控制属性 -->
<body>
    <div>div 标签</div>
    <p>p 标签</p>
    <span>span 选择器</span>
    <!-- 如果标签自己有样式则生效最自己的样式 a标签有自己的字体颜色 不继承父级文字的颜色属性 -->
    <a href="#">a 标签</a>
    <!-- h1自己有字体大小和字体的样式，那么就生效自己的，不继承父级样式 -->
    <h1>我是大标题h1标签</h1>
</body>
</html>

运行结果：

注意事项：

1、子级继承的是父级的文字控制属性

2、如果自己有自己的文字样式，那么不会继承父级的文字样式（可以理解为覆盖），显示自己的文字样式

3、如果子级没有自己的文字样式，那么才会继承父级的文字样式

三、优先级（Specificity）

优先级规则：

（1）简单选择器：优先级：也叫权重，当一个标签使用了多个选择器时，基于不同类型的选择器的匹配机制（记忆技巧：选择器的标签范围越大，优先级越低）

公式：*<标签<类<id<行内样式<！important

（2）复合选择器：

CSS优先级的计算规则为：!important > ID选择器数量 > 类选择器数量 > 标签选择器数量，

并且优先级值按以下格式计算：(a,b,c,d)，其中：

a: 表示!important的使用次数。

b: 表示ID选择器的数量。

c: 表示类选择器、属性选择器和伪类的数量。

d: 表示标签选择器和伪元素的数量。

下面将会通过几个例子带大家来理解一下复合选择器的优先级：

案例1：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级-叠加计算规则</title>
    <style>
        /* 行内样式>id选择器个数>类选择器个数>标签选择器个数 */
        /* 0,0,2,1 */
        .c1 .c2 div{
            color: aqua;
        }
        /* 0,1,0,1 */
        div #box3{
            color: rebeccapurple;
        }
        /* 0,1,1,0 */
        #box1 .c3{
            color: blue;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                这行文本是什么颜色
            </div>
        </div>
    </div>
</body>
</html>

运行结果：

案例2：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         /* 行内样式>id选择器个数>类选择器个数>标签选择器个数 */
        div p{
            color: blueviolet;
        }
        /* 有继承，继承权重最低 */
        .father{
            color: brown;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">
            猜猜我是什么颜色？
        </p>
    </div>
</body>
</html>

运行结果：

案例3：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三题</title>
    <style>
        /* （0,2,0,0） */
        #father #son{
            color:blue;
        }
        /* （0,1,1,1） */
        #father p.c2{
            color: aquamarine;
        }
        /* （0,0,2,2） */
        div.c1 p.c2{
            color: red; 
        }
        #father{
            /* 继承设置的!important,继承权重最低，！important用晚了 */
            color: rebeccapurple!important;
        }
        /* 继承 */
        div#father.c1{
            color: yellow;
        }
    </style>
</head>
<body>
    <div id ="father" class="c1" >
        <p id ="son" class="c2">
            这行文本是什么颜色？
        </p>
    </div>
</body>
</html>

运行结果：

总结

三大特性协同工作，赋予CSS强大的表现力。掌握这些规则后，开发者可以：

更精准控制元素样式
减少冗余代码量
提升样式可维护性
快速定位样式冲突问题

理解这些底层原理，是写出高质量CSS代码的关键所在。随着CSS新特性的不断演进（如层叠层@layer），这些基础理论依然保持着核心地位。