本文参考链接：https://web.qianguyihao.com/02-CSS基础/05-CSS样式表的继承性和层叠性.html#层叠性举例

CSS的继承性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>我是段落1</p>
    <p>我是段落2 </p>
    <p>我是段落3</p>
</div>
</body>
</html>

图片-1656379115927

我们给div标签增加红色属性，却发现，div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论：

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。

CSS的层叠性

层叠性：就是css处理冲突的能力。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
        .mice {
            color: coral;
        }
        #ncie {
            color: blue;
        }
    </style>
</head>
<body>
<p class="mice" id="ncie">nice</p>
</body>
</html>

上述代码效果如下，
图片-1656380436155

顺序如下：
id 选择器
类选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器

因为对于相同方式的样式表，其选择器排序的优先级为：
ID选择器 > 类选择器 > 标签选择器

层叠性举例

  • 举例1
    图片-1656380709498
    （上图来自https://web.qianguyihao.com/02-CSS%E5%9F%BA%E7%A1%80/05-CSS%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%9A%84%E7%BB%A7%E6%89%BF%E6%80%A7%E5%92%8C%E5%B1%82%E5%8F%A0%E6%80%A7.html#%E5%B1%82%E5%8F%A0%E6%80%A7%EF%BC%9A%E8%AE%A1%E7%AE%97%E6%9D%83%E9%87%8D，侵删）
  • 举例2
    如果两个样式的权重相同，那么就采取就近原则。
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1 {
        color: #ff8500;
    }
    .box2 {
        color: aqua;
    }
    .box3 {
        color: green;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3">
            <p>猜猜我是什么颜色</p>
        </div>
    </div>
</div>
</body>
</html>

图片-1656381124755

  • 举例3
    !important标记：优先级最高
    代码：
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1 .box2 .box3 .box {
        color: #ff8500;
    }
    .box {
        color: skyblue!important;
    }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3">
            <p id="col" class="box">猜猜我是什么颜色</p>
        </div>
    </div>
</div>
</body>
</html>

图片-1656381485273