七、css三大特性

·  阅读 63
七、css三大特性

七、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.属性值计算过程简介

wps1.png

二)层叠性(声明冲突)

1.声明冲突产生的原因:

一个元素的外观可能由多个规则影响,规则之间的属性相同,但取值不同,这就是声明冲突;

2.什么是层叠:层叠是一种机制,用于解决css声明冲突。

3.层叠的过程:

1)比较优先级

(作者样式表>浏览器默认样式>用户样式表)&(重要声明>普通声明)

2)比较特殊性(权重叠加计算)

在比较特殊性时,每一个冲突的声明会生成4个数字分组(abcd),以比较特殊性a越大、特殊性越高,若a相同,比较b,b越大,特殊性越高,依次类推......

a:若声明是行内样式,则为1,否则为0;

b:规则中id选择器的个数;

c:规则中类选择器、伪类选择器和属性选择器的个数;

d:规则中元素选择器、伪类选择器的个数;

嵌入idclass元素
abcd
style1000
id0100
class\属性、伪类0010
元素、伪元素0001
通配符0000
!important0000

每一个声明都有一个特殊性(specificity),当冲突发生时,特殊性高的会保留,低的会被淘汰;一个声明的特殊性,取决于规则适用范围的大小,规则适用范围越大,特殊性越低,适用范围越小,特殊性越高。

important>行内样式>ID选择器>类选择器(伪类选择器)>元素选择器(伪元素)>通配符选择器

特性:

1.给同一个标签设置不同的样式——此时样式会层叠叠加——会共同作用在标签上 2.给同一个标签设置相同的样式——此时样式会层叠覆盖——最终写在最后的样式会生效

注意点:

1.当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

三)优先级

特性:

不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式: 继承<通配符选择器<标签选择器<类选择器< id 选择器<行内样式< limportant

注意点: 1.limportant写在属性值的后面,分号的前面! 2.limportant不能提升继承的优先级,只要是继承优先级最低! 3.实际开发中不建议使用! important

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改