@[TOC](CSS的三大特性)
CSS层叠性
CSS层叠性:当给相同的选择器设定相同的样式(比如都设置color
),这时会引发样式冲突,层叠性的出现解决了这一样式冲突的问题,后面的样式会重叠(覆盖)前面的样式
CSS继承性
CSS继承性(inherited form):子标签会继承父标签的某些样式,主要是跟文字相关的样式(text-
、font-
、line-
以及color
),简单理解就是:子承父业
CSS优先级
CSS优先级:当同一个元素被多个选择器选中,就需要考虑优先级的大小进行样式设定,这里可以用选择器权重值总和来区分
- 当选择器相同,按照层叠性设定样式
- 当选择器不同,按照选择器权重值的大小总和设定样式
各个选择器的权重值
选择器 | 权重值 |
---|---|
继承和* | 0 |
元素选择器 | 1 |
类选择器(.) | 10 |
ID选择器(#) | 100 |
行内样式(style="") | 1000 |
!important | 无穷大 |
示例:
div div p {
color: red;
}
/*权重值总和为1+1+1*/
#demo2 {
color: green;
}
/*权重值总和为1000*/
div .demo1 {
color: blue;
}
/*权重值总和为1+100*/
#box1 {
color: yellow;
}
/*权重值总和为0,因为#box1是父元素,直接继承*/
<div>
<div id="box1">
<p class="demo1" id="demo2">这是一个自然段</p>
</div>
</div>
综上<p>
中文字的颜色是蓝色(权重值最大)