CSS三大特性
在css中,我们在设计样式的时候,经常会出现我们明明写好了样式,但是最后的测试发现我们书写的样式并没有起作用。
除开样式书写错误之外。还有大部分情况就是css样式的三大特性导致的问题。
首先,我们要知道css有哪三大特性:
- 层叠性
- 继承性
- 优先级
层叠性
定义:
层叠性是多种CSS样式的叠加,是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式出现的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。(也就是就近原则)
p { color: red; } p { color: blue; } //最后浏览器实现的是:blue 复制代码
这就是因为层叠性的原因,因为层叠性在权重相同的情况下是根据样式出现先后顺序来决定的,所以最后的样式将会覆盖前面的样式。
注意:
当出现相同样式且权重相同的情况的时候,那么css层叠性就会起作用。简单来说就是:样式不冲突,不会层叠;样式冲突权重相同,遵循就近原则。(也就是层叠性)
继承性
我们可以简单的理解为:当我们在一个元素上设置了样式,那么这个样式就会被继承到所有的子元素上。(子承父业)
div { color: red; } <div> <span>我是什么红色</span> </div> 复制代码
最后代码运行出来 :span
标签里面的字体为红色,但是我们并没有单独给span
写颜色样式,所以它的颜色为父元素的颜色。就是说,span
标签的颜色是div
标签的颜色,继承了腹肌元素的属性。
注意:
- 合理使用继承性可以简化代码,减少代码量。在我们设计中,
字体、字号、颜色、行距等有关文本属性的属性
是具有继承性的,我们可以在body
中统一设置,然后影响整个代码。 - 并不是所有的属性都可以继承,
与块元素相关的属性都不可以继承
,例如:边框、外边距、内边距、背景、定位、元素高度等等。
优先级
在了解什么是优先级之前,我们要先知道什么是权重,以及权重怎么计算。
css会根据权重高低来决定执行哪一个属性:
权重
选择器权重 | 0,0,0,0 |
通用选择器(*)/继承 | 0,0,0,0 |
标签选择器 | 0,0,0,1 |
类/伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无限大 |
权重计算
1.在我们css权重计算中,不会存在什么多少进制的说法,也就是说10个标签选择器的权重等于0,0,0,10
,并不会等于0,0,1,0
。也就是说无论多少个标签选择器,最后它的权重也不会比一个类选择器高。 2.前面我们讲述了层叠性。二者有一些联系:权重用来计算优先级,层叠用来表现优先级。
优先级
优先级就是在样式完全相同的情况下,权重高的样式会优先使用。
最后总结一下优先级的顺序:
!important > 行内样式 > id选择器 > 类/伪类选择器 > 标签选择器 > 继承/通用选择器