CSS三大特性
1,层叠性
当相同选择器为某个元素设置了相同属性时,如先给一个盒子设置了红色的背景色,后面又给它设置了绿色的背景色,此时后来设置的会覆盖掉先前设置的背景色,这就是css的层叠性
。
<div></div>
<style>
div{
width: 100px;
height: 100px;
background-color:rosybrown;
background-color: black;
}
</style>
此时效果图为
2,继承性
我们都知道html标签是存在嵌套关系的,即存在父子关系,而子元素是可以继承父元素的某些属性的,并不是所有属性,如font-,line-,text-开头的属性,以及color属性
<div class="father">我是父盒子
<div class="son">我是子盒子</div>
</div>
<style>
.father{
width: 200px;
height: 200px;
background-color:rosybrown;
font-style: italic
/* 给父元素设置斜体 */
}
.son {
width: 100px;
height: 100px;
margin: 0 auto;
background-color:saddlebrown;
}
</style>
此时子元素就继承了父元素的属性,父元素字体是斜体,子元素也是斜体。
3,优先级
前面提到,如果是相同选择器对元素设置样式,后面的会覆盖掉前面的,但是如果是不同选择器呢?这样就出现优先级的问题了,不同的选择器权重是不一样的,具体排序如下
!important>行内样式>id选择器>类和伪类选择器>标签选择器>继承或者通配符选择器
注:!important只能控制一行语句,如果要给所有属性添加最高优先级,每一句都要加,由此可见比较麻烦
.son {
width: 100px!important;
height: 100px!important;
margin: 0 auto;
background-color:saddlebrown!important;
}
但又出现一个问题,如果我们使用复合选择器,此时应该如何去比较权重呢?此时就可以使用具体数值来计算,具体如下
选择器 | 权重 |
---|---|
继承或通配符选择器 | 0 |
标签选择器 | 0.001 |
类和伪类选择器 | 0.01 |
id选择器 | 0.1 |
行内样式 | 1 |
!important | 无穷大 |
举例,一个复合选择器 .box,#land{}的权重计算就是0.11,在使用不同复合选择器来设置同一个元素样式时,可以利用这个公式来计算,比较两者的优先级,谁优先级高就用谁的。