继承性

126 阅读1分钟

继承性

文本相关的属性普遍具有继承性,只需要给先祖标签设置,即可在后代所有标签中生效。

如:color

font-开头的

list-开头的

text-开头的

line-开头的

因为文字相关属性有继承性,所以通常会设置body标签的字号,颜色。行高,这样就能当做整个网页的默认样式了。

<!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>
        .box1 {
            color:red;
            font-size:50px;
            font-family:'Times New Roman', Times, serif;
            font-weight:bold;
            line-height:100px;
            text-decoration:none;
            text-align:center;
            font-style:italic;

        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

就近原则

在继承的情况下,选择器权重计算失效,使用"就近原则”

如果都没有选中文本标签,看谁更近听谁的,,如果一样近,再通过比较权重进行判断。

<!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>
        #box1 #box2 #box3 {
            color:red;
        }
        /* p {
            color:green;
        } */
        .box1 .box3 {
            color:blue;
        }
    </style>
</head>
<body>
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p>我是文章</p>
            </div>
        </div>
    </div>
</body>
</html>