CSS的继承性和层叠性

继承性

<body>
    <div>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
</body>

<style type="text/css">
        /* div p {
            color: red
        } */

        div {
            color: blue
        }
 </style>

打开会发现p的字体也是蓝色的，浏览器的查看说是继承于div

有一些属性，当给自己设置的时候，自己的后代也同时拥有了这个属性，这就是继承性

但是并不是所有的属性都具有继承性

只有以color,text,line,font开头的具有这些特性

继承性从大贯穿到最小的元素

所以，如果我们的页面是统一的文字字号什么的，我们就可以利用继承性在body标签内统一书写

层叠性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        p {
            color: red
        }
        .pp {
            color: blue
        }
        #para1 {
            color: blueviolet
        }
    </style>
</head>
<body>
    <p class="pp" id="para1">
        我是段落
    </p>
</body>

发现最后的颜色是紫色，术语上讲前两个设置被层叠掉了，就是被覆盖了.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css"> 
        #box1 .hezi2 p{
            color: red
        }
        div div #box3 p {
            color: green
        } 

        div.hezi1 div.hezi2 div.hezi3 p {
            color: blue
        }

    </style>
</head>
<body>
    <div class="hezi1" id="box1">
        <div class="hezi2" id="box2">
            <div class="hezi3" id="box3">
                <p>我是什么颜色</p>
            </div>
        </div>
    </div>
</body>

会发现这个颜色是红色的，这个要怎么分析呢？

我们要分别数一下id选择器的数量类选择器的数量，标签选择器的数量。

id的数量类的数量标签的数量权重一次降低，即优先级一次降低

层叠性不进位

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div div div div div div {
            color: red
        }
        .haha {
            color: blue
        }
    </style>
</head>
<body>
    <!-- 层叠性不进位 -->
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <p class="haha">文字</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

是蓝色的。优先级低的就算再多也不会影响优先级高的。实际上是能够影响的，256个标签才抵得上一个类标签，但是没有实战意义。

如果权重一样，谁写在后面听谁的。

权重注意点:当所有的选择器直接选择上标签时才使用权重计算。继承性的属性权重为0

important 关键字

如果权重没有别人高，又想使自己起作用，可以使用important关键字语法: k:v !important 代表这个权重是无限大。

!important 需要注意的

!important 提升的是一个属性而不是一个选择器

p {
      color: red !important;
      font-size: 60px;
}

就是只针对 color有用对font-size没有用

!important无法提升继承的权重，该是0还是0

!important 不影响就近原则（如果都是在继承的情况下）如果离的一样近还是会比权重，这种情况下这个属行

平常情况下 !important 不会使用，因为会让CSS变得很乱，只是作为一个知识点。