scale()scaleX()scaleY()scaleZ()scale3d() 改变的不是元素的宽高,而是 X 和 Y 轴的刻度 本章有个很冷门的知识点 → scale 和 rotate 一起使用
顺晟科技
2022-09-13 12:03:26
291
层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式。
继承性指的是子孙元素可以继承父元素的属性。
记录一下开发中常用的继承属性:
字体系列font
、font-style
、font-weight
、font-size
、font-family
文本系列text-align
、text-indent
、line-height
、color
、、
、、
、
元素可见性visibility
光标属性cursor
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准,specificity用一个四位数来表示,更像四级从左到右,左的最大级,一级大于一级,数位之间没有进制,多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级。
贡献值 | 权重 | !important ∞ 无穷大 内联样式 1,0,0,0 ID选择器 0,1,0,0 类选择器,伪类选择器,属性选择器 0,0,1,0 标签选择器,伪元素选择器 0,0,0,1 通配符选择器 0,0,0,0
---|
优先级总结:
!important > 内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器
注意:
权重的进制并不是十进制,可以理解为其不会向前进一位,100个类选择器的优先级 小于 1个ID选择器 即: 0,0,9,0 < 0,1,00
#nav p
: 0,1,0,1
.nav ul li
: 0,0,1,2
a:hover
: 0,0,1,1
div ul li::after
: 0,0,0,4
!important
规则是一个bug级别的存在,优先级是无穷大。
一般来说,不要频繁使用!important
规则,这是一个坏习惯,除非被逼无奈【老代码中写了很差劲的内联样式或者引用的JavaScript框架中使用了内联样式...】
HTML中文网 - 如何理解css的层叠性
HTML中文网 - css优先级算法如何计算
13
2022-09
13
2022-09
13
2022-09
13
2022-09
13
2022-09
13
2022-09