CSS（三）| 继承性和层叠性

 

css有两大特性：继承性和层叠性

1. 继承性

　　给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*设置div颜色*/
        div {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>韩雪</p>
    </div>
</body>
</html>

 

2. 层叠性

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

权重： 谁的权重大，浏览器就会显示谁的属性


css权重:行内样式 1000 > id选择器 100 > 类选择器010 > 标签选择器001

如何看权重? 数选择器的数量.   id  类 标签

　　1.前提是选中标签,看权重,权重大的优先级要高,如果权重一样大,后面会覆盖掉前面的属性

　　2.继承来的属性，它们的权重为0, 跟选中的标签没有可比性

　　3.同是继承来的,谁描述的越近,谁的优先级要高."就近(选中标签)原则"

　　4.同是继承来的,谁描述的一样近,再回到数权重的状态

 

例1：选中标签,看权重,权重大的优先级要高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*设置颜色*/
        /*1 0 0*/
        #box {
            color: pink;
        }
        /*0 1 0*/
        .container {
            color: blue;
        }
        /*0 0 1*/
        p {
            color: gray;
        }
    </style>
</head>
<body>
    <p id="box" class="container">天空是什么颜色</p>
</body>
</html>

 

例2：权重一样大,后面会覆盖掉前面的属性（说的是css代码中的顺序）

还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。
<div id='box1' class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>


#box2 .wrap3 p{
    color: yellow;
}

#box1 .wrap2 p{
    color: red;
}

 

例3：继承来属性 它们的权重为0,跟选中的标签没有可比性

<div id='box1' class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>


#box1 #box2 .wrap3{
    color: red;
}
        
#box2 .wrap3 p{
    color: green;
}

答案是绿色。第一条css设置的属性值，是通过继承性设置成的红色，那么继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。

 

例4：同是继承来的,谁描述的越近,谁的优先级要高."就近(选中标签)原则"

<div id='box1' class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>


#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}

 

 

 

 

 

 

 

posted @ 2019-10-21 17:52  PythonGirl  阅读(296)  评论(0)    收藏  举报