CSS特性

1.继承

继承指一个元素如果没有设置某属性的值，该属性就会跟随父元素的值；css中有些属性可以继承，如color、font-size、line-height等
一个元素如果有设置某属性的值（无论自己设置还是浏览器设置的），就是用自己设置的值
不能继承的属性，一般可以使用inherit值强制继承

注意点

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>
        .box1 {
            font-size: 60px;
        }

        .box2 {
            font-size: 0.5em;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <p>123</p>
        </div>
    </div>
</body>
</html>

此时p元素直接继承.box2的30px，而不是继承0.5em，百分比同理

2.层叠

CSS允许多个相同名字的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>
        /* 基本层叠：后面一定会将前面覆盖掉
           前提：使用相同选择器
         */
        .box1 {
            color: orange;
        }
        .box2 {
            background-color: green;
            color: red
        }
        .box3 {
            width: 300px;
            color: blue
        }
    </style>
</head>
<body>
    <!-- 文字最终显示为蓝色 -->
    <div class="box1 box2 box3">123</div>
</body>
</html>

当选择器不同时，不能按照基本层叠理解，需要考虑选择器的权重
选择器优先级

posted @ 2020-02-24 11:14  kanaliya  阅读(143)  评论(0)    收藏  举报