CSS的三大特性

2023-12-20 06:57:23

CSS有三个非常重要的特性:层叠性、继承性、优先级

1.1 层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突

重叠性原则:

·样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式

·样式不冲突,不会层叠

1.2 继承性

CSS中的继承,子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业

恰当的使用继承可以简化代码,降低CSS样式的复杂性

子元素可以继承父元素的样式(text-,font-,line-这些元素开头分可以继承,以及color属性)

行高的继承性:

body{

? ? ? ? font:12px/1.5 Microsft YaHei;

}

行高可以跟单位也可以不跟单位?

如果子元素没有设置行高,则会继承父元素的行高为1.5

这个1.5 就是当前元素文字大小font-size的1.5倍

此时子元素的行高是:当前子元素文字大小*1.5

body行高1.5? 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

1.3 优先级

当同一个元素指定多个选择器,就会有优先级的产生

·选择器相同,则执行层叠性(就近原则)

·选择器不同,则根据选择器权重执行

? 选择器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? 选择器权重

继承 或者? *? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0,0,0,0

元素选择器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0,0,0,1

类选择器,伪类选择器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0,0,1,0

ID选择器? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0,1,0,0

行内样式 style=" "? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1,0,0,0

!important 重要的? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 无穷大

?优先级注意点:

1,权重是有4组数字组成,但是不会有进位

2,可以理解为id选择器 > 类选择器 > 元素选择器

3,继承的权重是0,如果该元素没有直接选中,不管父类元素权重多高,子元素得到的权重都是0

权重叠加

如果是复合选择器,则会有权重叠加,需要计算权重

权重虽然会叠加,但是永远不会有进位

div? ? ul? li? ? ? ? -------->? ?0,0,0,3

.nav? ul? li? ? ???-------->? ? 0,0,1,2

a:hover? ? ? ? ??-------->? ? 0,0,1,1

.nav? a? ? ? ? ? ?-------->? ? 0,0,1,1

?

文章来源:https://blog.csdn.net/2301_80099706/article/details/135083779
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。