CSS的继承性和层叠性

继承性：

　　面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法，CSS也有继承性，但是只有属性。

　　继承：给父级设置一些属性，子级会继承该父级的属性，这就是CSS中的继承。

　　可以继承的属性：color，font-*，text-*，line-*。主要是文本级的标签元素。

　　像一些盒子元素，定位的元素，就不能继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性和层叠性</title>
    <style>
        /*给.d2设置颜色，p会继承颜色*/
        .d1 .d2{
            color: red;
        }     
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <p>你好</p>
        </div>
    </div>
</body>
</html>

层叠性：
　　权重大的标签会覆盖掉权重小的标签。

　　id>class>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性</title>
    <style>
        #box{
            color: red;
        }
        .p1{
            color: green;
        }
        p{
            color: yellow;
        }
    </style>
</head>
<body>
    <p id="box" class="p1">你好</p>
</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
/*        #box1 #box2 {
            color: red;
        }

        #box2 #box3 {
            color: pink;
        }
        div div #box3 {
            color: black;
        }    
    
        div div #box3 {
            color: blue
        }
        div.wrap1 div.wrap2 div.wrap3{
            color: green;
        }*/
        #box2 #box3 {
            color:     yellow;
        }

        .wrap2 .wrap3 {
            color:     red;
        }
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>顾清秋</p>
            </div>
        </div>
    </div>
</body>
</html>

总结：先找哪个找的离目标最近，如果一样近，就先比较id数量，若id数量一致，再比较类数量。

　　　　没有选中标签元素，权重都是0，遵循就近原则。

important的使用：　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1 .wrap2 {
            color:     yellow !important;
        }

        .wrap1 #box2 {
            color:     red;
        }
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>顾清秋</p>
            </div>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1 .wrap2 {
            color:     yellow !important;
        }

        .wrap1 #box2 {
            color:     red;
        }
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>顾清秋</p>
            </div>
        </div>
    </div>
</body>
</html>

　　在同级的情况下，（!important）可以将权重设置为无限大！

　　!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

posted @ 2018-05-23 21:57  Qingqiu_Gu  阅读(400)  评论(0)  编辑  收藏  举报