CSS-4：CSS的三大特性

一.特性一：层叠性

相同的选择器给设置相同的样式，如都设置了color或者font-size的样式，此时一个样式会覆盖（层叠）掉另外一个冲突的样式，因为不可能两个样式同时起作用

层叠性主要解决样式冲突的问题

层叠性的特征：

样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
如果样式不会冲突，那么就不会层叠（覆盖）

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>
        div {
            color: red;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪，前浪死在沙滩上。</div>
</body>

</html>

看完这段代码，你猜猜看<body>标签中的<div>标签里面的文字的颜色是什么？

答案是：粉色

可以按下F12键打开开发者模式，查看Element中文字的详细情况

可见确实是根据"就近原则"来执行层叠性这个特性的

html 复制代码

 <style>
        div {
            color: red;
            font-size: 12px;
        }

        div {
            color: pink;
        }
    </style>

font-size=12px;没有和第二个div选择器中的样式冲突，就不会被层叠掉

因此页面的字体大小是12像素，比之前变小了

二.特性二：继承性

继承性就是在CSS中子标签会继承父标签的一些样式，但并不是所有的样式都会继承，如color，font-size，line- ， text-这些和文字相关的样式会被继承

恰当地使用继承性可以简化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>CSS继承性</title>
    <style>
        div {
            color: skyblue;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生凤，老鼠的儿子会打洞。</p>
    </div>
</body>

</html>

效果：可见，虽然没有给<p>标签设置样式，但是由于它在<div>标签内部，是<div>标签的子节点，所以会继承<div>标签的样式

打开调试工具，可以看到继承性的具体信息：

三.行高的继承

html 复制代码

font-size: 12px/24px;

12px表示字体的大小，而斜杠后面的24px表示行高的大小，为24像素

但是行高的大小也可以不跟单位，表示的是行高大小是当前元素的字体大小的多少倍

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>
        body {
            color: cyan;
            /*cyan蓝绿色，青色*/
            font-size: 12px/1.5 'Microsoft YaHei';
        }

        div {
            /* 此时子元素div继承了父元素body的行高，行高是当前子元素文字大小的1.5倍，即14*1.5=21px */
            /* 所以其实div中的文字大小为21像素 */
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>现在是北京时间17点50分</p>
    </div>
    <p>2025年11月17日</p>
    <p>粉红色的回忆</p>
</body>

</html>

打开开发者工具，（注意：font-size样式不支持设置行高和字体族信息，要将它改为font复合属性）

修改正确后，可以发现确实<p>中的字体的字体大小继承了当前行高*1.5这个属性

同理，可以查看<div>标签外部的<p>标签中文字的字体大小：

四.特性三：优先级

当同一个元素指定多个选择器，就会有优先级的产生

规则：

选择器相同，执行层叠性
选择器不同，则更具选择器权重执行

|------------------|---------|
| 选择器 | 权重 |
| 继承或* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式：style="xxx" | 1,0,0,0 |
| !important | 无效大 |

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>
        div {
            color: pink;
        }

        .test {
            color: red;
        }
    </style>
</head>

<body>
    <div class="test">你笑起来真好看</div>
</body>

</html>

效果：

如设置：

html 复制代码

color:pink!important;

则最优先设置pink颜色（注意：!important单独写才起着权重最大的作用，如果它写在其他选择器内部，那么它就是属于这个选择器的权重，遇到比这个选择器权重大的选择器，那么CSS就会执行那个权重更大的选择器中设置的属性）

五.优先级注意的事项

六.权重的叠加

当遇到复合选择器时，该复合选择器的权重会进行叠加

权重虽然会叠加，但永远不会进位