CSS三大特性

css三大特性:层叠性,继承性,优先级

层叠性:选择器权重相同,样式有冲突。后者会覆盖(层叠)掉前者(就近原则)。样式不冲突不会层叠。
CSS的三大特性——层叠性、继承性和优先级

继承性:子标签会继承父标签的某些样式。如文字颜色,字号等(text- , font- , line- 这些元素以及color)。但不是所有样式都会被继承。
CSS的三大特性——层叠性、继承性和优先级

 行高的继承性:

  body { font:12px/1.5 Microsoft YaHei; }

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为 1.5
  • 此时子元素的行高是:当前子元素的文字大小 * 1.5
  • body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级:当一个元素指定多个选择器(产生样式冲突),就会有优先级产生。 选择器相同执行层叠性,选择器不同则按照选择器的权重

CSS的三大特性——层叠性、继承性和优先级

权重的叠加:复合选择器会有权重叠加的问题。权重会叠加,但是不会有进位的问题。

  • 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

  知道了这三个特性之后,我们就能更好知道标签到底对应哪个样式。

&日常
CSS的三大特性——层叠性、继承性和优先级

相关文章: