4-4CSS三大特性-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62602850/article/details/120689782

本文详细介绍了CSS的继承性，包括哪些属性可以被子元素继承，如何利用继承减少代码，以及特殊情况下的继承失效。接着讨论了CSS的层叠性，解释了样式叠加与覆盖的规则，并通过实例展示了如何处理样式冲突。最后，阐述了CSS的优先级概念，给出了优先级的计算公式，并提醒了使用!important的注意事项。通过这些知识，读者将能更好地掌握CSS样式的控制与应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标：能够认识CSS的继承和层叠特性，会计算CSS的优先级权重的比较

学习路径：

1.继承性

1.1继承性的介绍

特性：子元素有默认继承父元素样式的特点（子承父业）
        可以继承的常见属性：
1.color
        2.font-style、font-weight、font-size、font-family
        3.text-indent、text-align
        4.line-height
        5. ....
        注意点：可以通过调试工具判断样式是否可以继承

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .father{
            color: red;
        }
    /*    .son儿子变成红色 父亲没有变颜色*/
    /*    .father父亲儿子都变成红色*/

    </style>
</head>
<body>
  <div class="father">
      父亲
      <div class="son"></div>
        儿子
  </div>
</body>
</html>

1.2拓展继承的应用

好处：可以在一定程度上减少代码

常见应用场景：
1.可以直接给ul设置list-style：none属性，从而去除列表默认的小圆点样式
2.直接给body标签设置同意的font-size，从而统一不同浏览器默认文字大小

1.3拓展继承失效的特殊情况

如果元素有浏览器默认样式此时继承性依然存在，但是优先显示浏览器的默认样式
1.a标签的color会继承失效
2.h系列标签的font-size会继承失效
3.div的高度不能继承，但是宽度有类似于继承的效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .father{
            /*color: red;*/
            /*font-size: 20px;*/
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }
        .son{
            /*width: 100px;*/
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="father">
<!--        继承正常情况-->
<!--        <div class="son">儿子</div>-->

<!--        1.a标签的color会继承失效-->
<!--        <a href="#">我是一个a标签</a>-->

<!--        2.h系列标签的font-size会继承失效-->
<!--    <h1>我是一个h1标签</h1>-->

<!--        3.div的高度不能继承，但是宽度有类似于继承的效果-->
    <div class="son"></div>

    </div>
</body>
</html>

2.层叠性

2.1层叠性的介绍

特性：
1.给同一个标签设置不同的样式→此时样式会层层叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点：
1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        /*    当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果*/
        }
        p{
            color: blue;
        }
        /*p{*/
        /*    color: red;*/
        /*}*/
        /*p{*/
        /*    font-size: 30px;*/
        /*}*/
        /*给同一个标签设置不同的样式→此时样式会层层叠加→会共同作用在标签上*/
        /*p{*/
        /*    color: red;*/
        /*}*/
        /*p{*/
        /*    color: blue;*/
        /*}*/
    /*    给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效*/


    </style>
</head>
<body>
  <p class="red">我是一行文字</p>
</body>
</html>

3.优先级

3.1优先级的介绍

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important

注意点：

1.!important写在属性值的后面，分号的前面
2.!important不能提升继承的优先级，只要是继承优先级最低！
3.实际开发中不建议使用!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        /*7.!important 最强外挂*/
        p{
            color: blueviolet !important;
        }

        /*5.id选择器*/
        #one{
            color: orange;
        }

        /*4.类选择器*/
        .son{
            color: black;
        }

        /*3.标签选择器*/
        p{
            color: skyblue;
        }

        /*2.通配符选择器*/
        *{
            color: blue;
        }

        /*1.继承*/
        .father{
                color: red;
        }
    </style>
</head>
<body>
    <div class="father">
<!--        6.行内选择器 -->
        <p class="son" id="one" style="color: pink">我是一个p标签</p>
    </div>
</body>
</html>