CSS的继承性和层叠性

最新推荐文章于 2024-01-29 15:07:41 发布

程序媛Render

最新推荐文章于 2024-01-29 15:07:41 发布

阅读量718

点赞数 2

分类专栏： css 前端学习文章标签： css

本文链接：https://blog.csdn.net/qq_46492364/article/details/114580236

版权

前端学习同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

文章目录

前言
一、继承性
二、层叠性
总结

前言

今天主要学习css的层叠式，并对之前的学习进行一个阶段性的巩固，做做相应练习。

一、继承性

除了前面提到的样式之外，还有一个重要的概念就是层叠式，层叠式式贯穿整个css的性质，包含继承性和层叠性。
一个标签没有设置过样式，他的某个祖先级设置过，这种从祖先级继承过来的，成为继承性。能够被继承的是所有文字相关的样式属性，其他的属性都不能被继承。
在这里插入图片描述
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: brown;
            font-family: "宋体";
            font-size: 12px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            
        }
        /* p {
            height: 50px;
        } */
    </style>
</head>
<body>
    <h2>这是一个二级标题</h2>
    <div class="box1">
        <p>这是box1 标签内部的段落</p>
        <p>这是box1 标签内部的段落</p>
        <p>这是box1 标签内部的段落</p>
        <p>这是box1 标签内部的段落</p>
    </div>
    <div class="box2">
        <p>这是box1 标签内部的段落</p>
        <p>这是box1 标签内部的段落</p>
        <p>这是box1 标签内部的段落</p>
        <p>这是box1 标签内部的段落</p>
    </div>
</body>
</html>

继承性应用：
（1）可以将页面中出现最多的文字样式设置给一个较大的组先级标签例如body，后期所有的后代标签都可以从body进行继承。

二、层叠性

1.选中目标标签

基础选择器的权重：根据范围，范围越大权重越小。*<标签选择器<类选择器<id选择器
高级选择器权重：依次比较组成高级选择器的id个数，类的个数，标签选择器的个数。（id个数、类个数、标签个数）
第一步：比较多个选择器的权重，权重高的层叠权重低。
第二步：如果选择器权重都相同，需要比较css中代码的书写顺序，后写的层叠先写的。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * {
            color: brown;
        }
        p {
            color: cadetblue;
        }
        .demo {
            color: cornflowerblue;
        }
        #ps {
            color: darkorange;
        } */
        /* body p {
            color: darkorange;
        }
        .demo {
            color: darkorchid;
        }
        #ps.demo {
            color: deepskyblue;
        } */
        /* #box1 .box2 .demo,.box1 #box2 #ps {
            color: deepskyblue;
        } */
        .box1 #box2 .box3 .demo {
            color: forestgreen;
        }
        .box1 .box2 #box3 .demo {
            color: firebrick;
        }
    </style>
</head>
<body>
    
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">看一看文字颜色是什么</p>
            </div>
        </div>
    </div>
</body>
</html>

2.选中祖先级标签

如果选择器选中的是祖先元素，文字样式可以被继承。
第一步：比较就近原则，比较选择器选中的组先级在HTML结构中距离目标标签的远近，近的层叠远的。
第二步：如果选中的组先级距离目标一样近（同一个组先级），比较选择器权重，权重大的层叠小的。
第三步：如果选择器权重都相同，需要比较css中代码的书写顺序，后写的层叠先写的。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        /* 第二步：距离相同的组先级，判断选择器权重 */
        /* .box3 {
            color: gold;
        }
        #box3 {
            color: gray;
        } */
        /* 距离相同的组先级，权重也相同，比较css书写顺序 */
        #box2 .box3 {
            color: gray;
        }
        .box2 #box3 {
            color: hotpink;
        }
    </style>
</head>
<body>
    
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">看一看文字颜色是什么</p>
            </div>
        </div>
    </div>
</body>
</html>

3.important和行内式

！important，如果在比较选择器权重的过程中，遇见一个！important关键字，可以将某条css样式属性提到最大。
书写位置：某个css属性的属性值后面空格加！important
注意：
（1）在就近原则中，不需要比较选择器权重，所有的important会失效。
（2）important不能提升选择器权重。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        /* 如果遇到important，在判断权重过程中会将某条属性的权重提升到最大 */
        #box2 {
            color: gray !important;
        }
        #box2 .box3 {
            color: hotpink;
        }
    </style>
</head>
<body>
    
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps">看一看文字颜色是什么</p>
            </div>
        </div>
    </div>
</body>
</html>

行内式权重
行内样式与内嵌式或外联式样式比较权重时，行内式权重最高
！important比行内式高。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * {
            color: brown;
        }
        p {
            color: cadetblue;
        }
        .demo {
            color: cornflowerblue;
        }
        #ps {
            color: darkorange;
        } */
        /* body p {
            color: darkorange;
        }
        .demo {
            color: darkorchid;
        }
        #ps.demo {
            color: deepskyblue;
        } */
        #box1 .box2 .demo,.box1 #box2 #ps {
            color: deepskyblue !important;
        }
        /* .box1 #box2 .box3 .demo {
            color: forestgreen;
        }
        .box1 .box2 #box3 .demo {
            color: firebrick;
        } */
        /* 选中的是目标的祖先级，文字样式被继承，也会出现层叠 */
        /* 第一步：就近原则 */
        /* #box1 {
            color: forestgreen;
        }
        .box2 {
            color: fuchsia;
        } */
        /* 第二步：距离相同的组先级，判断选择器权重 */
        /* .box3 {
            color: gold;
        }
        #box3 {
            color: gray;
        } */
        /* 距离相同的组先级，权重也相同，比较css书写顺序 */
        /* #box2 .box3 {
            color: gray;
        }
        .box2 #box3 {
            color: hotpink;
        } */

        /* 如果遇到important，在判断权重过程中会将某条属性的权重提升到最大 */
        /* #box2 {
            color: gray !important;
        }
        #box2 .box3 {
            color: hotpink;
        } */
        /* 行内样式的权重最高，但是低于important */
    </style>
</head>
<body>
    
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p class="demo" id="ps" style="color: indigo;">看一看文字颜色是什么</p>
            </div>
        </div>
    </div>
</body>
</html>

总结

在这里插入图片描述
今天学习的层叠性，学得自己蒙蒙的，还要花时间再理顺一下，有谁清楚这部分问题吗，想请教，谁会记得评论区，感谢！

程序媛Render

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS的继承性和层叠性

文章目录前言一、继承性二、层叠性1.选中目标标签2.选中祖先级标签3.important和行内式总结前言今天主要学习css的层叠式，并对之前的学习进行一个阶段性的巩固，做做相应练习。一、继承性除了前面提到的样式之外，还有一个重要的概念就是层叠式，层叠式式贯穿整个css的性质，包含继承性和层叠性。一个标签没有设置过样式，他的某个祖先级设置过，这种从祖先级继承过来的，成为继承性。能够被继承的是所有文字相关的样式属性，其他的属性都不能被继承。代码如下（示例）：<!DOCTYPE htm.
复制链接

扫一扫

专栏目录