七、css三大特性
一)继承性
1.特性:
子元素会自动拥有父元素的某些css属性;继具有传递性,一代传一代(子承父业)
2.可以继承的常见属性:
*color *font- style 、 font - weight 、 font - size 、 font - family *text - indent 、 text - align *line - height
3.不可以被继承的属性有:
background-color
4.注意点:
可以通过调试工具判断样式是否可以继承
5.强制继承:
也叫做显式继承,是指将css属性值设置为inherit
6.拓展继承失效的特殊情况:
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
*a标签的 color 会继承失效 *h系列标签的 font — size 会继承失效 *div 的高度不能继承,但是宽度有类似于继承的效果
7.属性值计算过程简介
二)层叠性(声明冲突)
1.声明冲突产生的原因:
一个元素的外观可能由多个规则影响,规则之间的属性相同,但取值不同,这就是声明冲突;
2.什么是层叠:层叠是一种机制,用于解决css声明冲突。
3.层叠的过程:
1)比较优先级
(作者样式表>浏览器默认样式>用户样式表)&(重要声明>普通声明)
2)比较特殊性(权重叠加计算)
在比较特殊性时,每一个冲突的声明会生成4个数字分组(abcd),以比较特殊性a越大、特殊性越高,若a相同,比较b,b越大,特殊性越高,依次类推......
a:若声明是行内样式,则为1,否则为0;
b:规则中id选择器的个数;
c:规则中类选择器、伪类选择器和属性选择器的个数;
d:规则中元素选择器、伪类选择器的个数;
嵌入 | id | class | 元素 | |
---|---|---|---|---|
a | b | c | d | |
style | 1 | 0 | 0 | 0 |
id | 0 | 1 | 0 | 0 |
class\属性、伪类 | 0 | 0 | 1 | 0 |
元素、伪元素 | 0 | 0 | 0 | 1 |
通配符 | 0 | 0 | 0 | 0 |
!important | 0 | 0 | 0 | 0 |
每一个声明都有一个特殊性(specificity),当冲突发生时,特殊性高的会保留,低的会被淘汰;一个声明的特殊性,取决于规则适用范围的大小,规则适用范围越大,特殊性越低,适用范围越小,特殊性越高。
important>行内样式>ID选择器>类选择器(伪类选择器)>元素选择器(伪元素)>通配符选择器
特性:
1.给同一个标签设置不同的样式——此时样式会层叠叠加——会共同作用在标签上 2.给同一个标签设置相同的样式——此时样式会层叠覆盖——最终写在最后的样式会生效
注意点:
1.当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
三)优先级
特性:
不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式: 继承<通配符选择器<标签选择器<类选择器< id 选择器<行内样式< limportant
注意点: 1.limportant写在属性值的后面,分号的前面! 2.limportant不能提升继承的优先级,只要是继承优先级最低! 3.实际开发中不建议使用! important