css三大特性

136 阅读2分钟

css三大特性

继承性 层叠性 优先级

继承性

控制文字的属性都可以继承,不是控制文字的属性不能被继承;

继承:子元素可以继承父元素的某些样式(子承父业)

继承失效:如果标签有默认样式,继承依然存在,但是会优先执行浏览器给的默认样式

1.a标签的color属性会失效

2.h系列的字体大小属性会失效

3.宽高不能被继承,但是宽度有类似继承的特性(因为div独占一行)

层叠性

层叠性遵循的原则:就近原则(远亲不如近邻)相同选择器设置相同的样式就会出现层叠覆盖 相同选择器设置不同的样式就会出现叠加

层叠性:相同选择器设置相同的样式就会出现层叠

优先级

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

继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important

!important不能提升继承的优先级,只要是继承优先级最低.

如果不是继承,!important天下第一,实际开发不建议使用!important

权重叠加 如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效

Snipaste_2022-12-15_21-05-08.png 权重叠加计算公式:(每一级之间不存在进位)

行内样式个数 id选择器个数 类选择器个数 标签选择器个数

0 0 0 0

简单理解

行内样式个数:1000 ---1000

id选择器个数:0100 --100

类选择器个数:0010 ---10

标签选择器个数 :0001 ---1

如果优先级相同,则比较层叠性,谁的样式在后面,谁说了算.

!important如果不是继承,权重最高 天下第一