CSS三大特性(继承性，层叠性，优先级)

最新推荐文章于 2025-04-29 22:55:59 发布

氿玥

最新推荐文章于 2025-04-29 22:55:59 发布

阅读量2.3k

点赞数 31

文章标签： css 前端

本文链接：https://blog.csdn.net/2201_75404424/article/details/140617877

版权

在这篇文章中，我将通过详细的代码和最简便的语言来为大家介绍CSS的三大特性

在这篇文章中，我将通过详细的代码和最简便的语言来为大家介绍CSS的三大特性

一、继承性

发生的前提是在嵌套关系下，为父级元素设置css样式时，会将一部分可继承的自动继承到子元素上，就相当于俗话说的子承父业

★ 文字颜色可以继承

★ 文字大小可以继承

★ 字体可以继承

★ 字体粗细可以继承

★ 文字风格可以继承

★ 行高可以继承

总结：文字的所有属性都可以继承，一下除外

标题标签（h1-h6）无法继承文字大小
a标签无法继承文字颜色

（text-，font-，line-这些元素开头的可以继承，以及color属性）

1.1 代码示例

<!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>
        div{
            /*字体颜色*/
            color: red;
            /*字体大小*/
            font-size: 50px;
            /*字体风格 italic倾斜*/
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
        <ul>
            我是一个ul
            <li>我是一个li</li>
        </ul>
    </div>
</body>
</html>

1.2 实现效果

二、层叠性

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码。和标签调用选择器的顺序没有关系。

1.2 代码示例

<!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>
        div{
            color: red;
            font-size: 50px;
            font-style: italic;
            text-align: center;
        }
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        我是一个div
    </div>
</body>
</html>

2.2 实现效果

通过右下角的样式我们可以看出在先前被定义的红色字体已经被后来的蓝色字体覆盖了，其他没有被覆盖的还是正常显示出来

三、优先级

默认样式<标签选择器<类选择器<id选择器<行内样式<！important

权重 0 1 10 100 1000 无穷大

优先级特点

继承的权重为0
权重能叠加

3.1代码示例

<!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>
        #con{
            color: blue;

        }

        .box{
            color: blueviolet;
            font-family: "楷体";
        }
        
        div{
            color: skyblue !important;
            font-size: 50px;
            font-style: italic;
            font-family: "宋体";
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box" id="con" style="font-size: 60px; color: yellow;">
        我是一个div
    </div>
</body>
</html>