前端-CSS-5-继承性&层叠性&权重比较

CSS三大特性详解

最新推荐文章于 2025-09-07 21:17:08 发布

weixin_30929295

最新推荐文章于 2025-09-07 21:17:08 发布

阅读量84

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/foremostxl/p/9824637.html

本文深入讲解CSS的继承性、层叠性和!important特性的核心概念。通过实例解释如何使用这些特性来优化网页样式，包括属性继承规则、权重计算及强制样式生效的方法。

1、继承性

<style type="text/css">
        
        .father{
            
            font-size: 30px;
            background-color: green;
        }
        .child{
            color: purple;
        }

    </style>
</head>
<body>
    
    <!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承

    有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-*   文本元素

    像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
     -->
    <div class="father" id="egon">
        <div class="child">
            <p>alex</p>
        </div>    
    </div>
    <p>小马哥</p>
</body>

2、层叠性

总结：
1.先看标签元素（实际显示的内容）有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性

 <style type="text/css">

    /*<!-- */
        /*层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了*/
        /*权重： 谁的权重大，浏览器就会显示谁的属性*/
        /**/
        /*谁的权重大？  非常简单   数数*/
                /**/
        /*id的数量  class的数量  标签的数量*/


     /*-->*/
        #box{
            color: red;
        }
        .container{
            color: yellow;
        }
        p{
            color: #2aabd2;
        }
    </style>
-------------------------------------------------------------------------

  /*id的数量  class的数量  标签的数量*/

3、！important

<!-- ！important:设置权重为无限大 
        !important 不影响继承来的权重，只影响选中的元素

    -->

不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的。

<style type="text/css">
        p{
            color: red !important;
            font-size: 30px;
        }
        .spe1{
            color: yellow ;
            font-size: 40px;
        }
        .spe2{
            color: green;
            font-size: 40px;
        }

        ul{
            color: red;
        }
        .list{
            color: purple !important;
        }
    </style>