CSS三大特性

1.1层叠性

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

层叠性原则:

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

样式不冲突,不会层叠

1.2继承性

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

CSS中的继承:

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

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

1.3优先级

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

选择器相同,则执行层叠

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

  • ID 选择器, 如 #id{}
  • 类选择器, 如 .class{}
  • 属性选择器, 如 a[href="segmentfault.com"]{}
  • 伪类选择器, 如 :hover{}
  • 伪元素选择器, 如 ::before{}
  • 标签选择器, 如 span{}
  • 通配选择器, 如 *{}

优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

!important 属性拥有最高优先级。

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

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

原文链接:,转发请注明来源!