CSS继承性和层叠性

verify.Mar

已于 2024-05-24 17:00:54 修改

阅读量639

点赞数 10

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

于 2024-05-24 13:59:25 首次发布

本文链接：https://blog.csdn.net/2301_80227523/article/details/139158527

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS继承性

<!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;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
    </div>
</body>
</html>

上方的代码我们给div标签增加红色属性，却发现，div里的每一个标签<p>也增加了红色属性，就就是继承性。

继承性是从自己开始，直到最小的元素。

但是在自己的代码中给div添加一个border属性

<!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;
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
    </div>
</body>
</html>

发现p标签没有border属性

so：

关于文字样式的属性，都具有继承性。这些属性包括：color、text-开头的，line-开头的，font-开头的。
关于盒子，定位，布局的属性，都不能继承。

CSS的层叠性

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

PS：所有权重的计算，没有任何兼容问题

或许好多家人们要问什么是重叠性，举个栗子

<!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>
        p{
            color: red;
        }
        .haha{
            color: green;
        }
        #heihei{
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <p class="haha" id="heihei">猜猜我什么颜色</p>
    </div>
</body>
</html>

用浏览器打开的话，就会发现字是蓝色的，这个时候就出现了层叠性的情况

当多个选择器，选择了某个元素的时候，要按照如下顺序统计权重：

id选择器
类选择器，属性选择器，伪类选择器
标签选择器，伪元素选择器

优先级为：ID选择器 > 类选择器 > 标签选择器

栗子：

举例1：计算权重

分别统计一下id选择器，类选择器，标签选择器的数量

一个id选择器，1个类选择器，1个标签选择器，记作1，1，1

#box1 .hezi2 p{
    color: red;
}

1个id选择器，0个类选择器，3个标签选择器，记作1，0，3

div div #box3 p{
    color；green;
}

0个id选择器，3个类选择器，4个标签选择器，记作0，3，4

div.hezi div.hezi2 div.hezi3 p{
    color: blue;
}

统计各个选择器的数量，优先级高的胜出。文字颜色为红色。

PS：不进位，实际能进，但是没有实战意义。

举例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>
        #box1 .hezi p{
            color: red;
        }
        #box div .pp{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="hezi2" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p class="pp">
                    我什么颜色
                </p>
            </div>
        </div>
    </div>
</body>
</html>

第一个样式权重1，1，1 ；第二个样式权重也是1，1，1

权重相同时，第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）

举例3：

要实现以上样式：第一个li为红色，其余li全部为蓝色

可能有人会写成这样

<!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>
        .hezi ul li{
            color:blue;
        }
        .special{
            color:red;
        }
    </style>
</head>
<body>
    <div class="hezi">
    <ul>
        <li class="speacial">文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
    </ul>
</div>
</body>
</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>
        .hezi ul li{
            color:blue;
        }
        .hezi ul li.speacial{
            color:red;
        }
    </style>
</head>
<body>
    <div class="hezi">
        <ul>
            <li class="speacial">文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
            <li>文字</li>
    </ul>
</div>
</body>
</html>

上图中第二个样式比第一个样式权重要大。因此可以实现我们需要的效果

好用吧，但是用好很难，所有比较稳妥的方法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重

举例4：继承性造成的影响

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0

为了验证上面举例说明

<!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>
        #hezi1 #hezi2 #hezi3{
            color:red;
        }
        div.box div.box div.box{
            color:blue;
        }
        p{
            color:green;
        }
    </style>
</head>
<body>
    <div class="box" id="hezi1">
        <div class="box" id="hezi2">
            <div class="box" id="hezi3">
                <p>什么颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

开始数权重之前，一定要看看是不是真的选中了文字所在的最内层标签。

#hezi1 #hezi2 #hezi3 没有选中最内层p，所以权重为0

同理div.box div.box div.box权重也是0

p{color:green;} 权重为0，0，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>
        #box1{
            color:red;
        }
        #box2{
            color:blue;
        }
        #box3{
            color:green;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <p>什么颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

上述结果为绿色

附上GitHub大佬总结链接