CSS的三大特性:层叠性、继承性、优先级。
层叠性:在相同选择器的设置相同样式的时候,后面设置的样式会覆盖前面的样式,如下图:
CSS代码:
.demo {
width: 600px;
height: 400px;
margin: 100px auto;
background-color: #be2121;
border: 10px solid #33ec3f;
}
.demo {
border-bottom-color: #7433ec;
}
这里层叠了下边框的颜色
继承性:子元素继承父元素属性,如下图:
CSS代码片段:
.demo {
width: 600px;
height: 400px;
margin: 100px auto;
background-color: #be2121;
border: 10px solid #33ec3f;
color:aliceblue;
}
HTML代码:
<div class="demo">
<div>我是div</div>
<p>我是P标签</p>
</div>
子元素div和p标签是没有设置样式的,但是从图片中可以看出,它们都继承了父元素设置的color
优先级:当同一个元素指定多个选择器时,如果选择器相同,执行层叠性;如果选择器不同,执行权重较高者。
各种选择器的权重值如下表:
选择器 | 选择器权重 |
继承 或 * | (0,0,0,0) |
元素选择器 | (0,0,0,1) |
类选择器,伪类选择器 | (0,0,1,0) |
ID选择器 | (0,1,0,0) |
行内样式 style="" | (1,0,0,0) |
!important 重要的 | ∞无穷大 |
注意:不管父元素的权重多高,子元素得到的权重都是0
权重叠加的例子:
div → 0,0,0,1
div p → 0,0,0,2
nav div a → 0,0,0,3
.demo p → 0,0,1,1
a:hover → 0,0,1,1
#demo p → 0,1,0,1