CSS特性

最新推荐文章于 2024-11-07 13:56:28 发布

救救孩子吧8༼⍤༽

最新推荐文章于 2024-11-07 13:56:28 发布

阅读量35

点赞数

分类专栏： html+css学习文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_49553751/article/details/132891418

版权

html+css学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

CSS特性:化简代码/定位问题，并解决维妮塔

继承性

继承性：子级默认继承父级文字控制属性（如果标签有自己的样式则生效自己的样式，不继承）

代码

<!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{
            font-size: 30px;
            color: red;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>div 标签</div>
    <p>p 标签</p>
    <span>span 标签</span>
    <!-- 如果标签有自己的样式则生效自己的样式，不继承 -->
    <a href="#">a 标签</a>
    <h1>h1 标签</h1>
</body>

</html>

实现效果

层叠性

特点

相同的属性会覆盖：后面的CSS属性会覆盖前面的CSS属性
不同的属性会叠加，不同的CSS属性都生效

代码

<!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: red;
            font-weight: 700;
        }
        div{
            color: green;
            font-size: 30px;

        }
    </style>
</head>
<body>
    <div>div 标签</div>
</body>
</html>

选择器的优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

(选中标签的范围越大，优先级越低)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        *{
            /* ！important提权功能，提高权重/优先级做高 慎用*/
            color: red !important;
            
        }
        div{
            color: green;
        }
        .box{
            color: blue;
        }
        #box{
            color: aqua;
        }

    </style>
</head>
<body>
    <div class="box" id="box" style="color: blueviolet;">div 选择器</div>
</body>
</html>