Day11CSS特性

CSS的特性包括继承性，层叠性，优先级

1.继承性
子级默认继承父级的文字控制属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS的继承性</title>
    <style>
        body{
            color: red;
            font-size: 40px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>div标签</div>
    <span>span标签</span>
    <p>p标签</p>
    <!-- 如果标签有自己的样式则会生效自己的样式，不继承 -->
    <a href="#">超链接</a>
    <h1>h1标签</h1>
</body>
</html>

image

2.层叠性
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <style>
        div{
            color: blue;
            font-size: 40px;
        }
        div{
            color: red;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>她是个30岁了，至今还没有结婚的女人</div>
</body>
</html>

image

3.优先级
image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        /* 技巧:选择器中标签的范围越大，优先级则越低 */
        div{
            color: blueviolet;
        }
        *{
            /* ！important,具有提权功能,提高选择器的优先级到最高，但需慎用 */
            color: red !important;
        }
        .box{
            color: aquamarine;
        }
        #test{
            color: violet;
        }
    </style>
</head>
<body>
    <div class="box" id="test" style="color: blue;">只有洁净的人才能进入她的心怀</div>
</body>
</html>

image

拓展:image

posted @ 2025-11-03 23:01  冰涿  阅读(7)  评论(0)    收藏  举报