Loading

CSS三大特性

层叠性

相同的选择器设置相同的样式,此时一个样式就会覆盖另一个样式。解决了样式冲突的问题。

层叠性原则

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行那个样式
  • 样式不冲突,不会层叠

继承性

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

  • 恰当的使用继承可以简化代码,降低CSS样式的复杂性
  • 资源色可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)

优先级

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

  • 选择器相同则执行层叠性
  • 选择器不同,则根据选择器权重执行
选择器 选择器权重
继承 或者 * 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 style=“” 1,0,0,0
!important 重要的 无穷大

注意

  1. 继承到的父标签中的样式的权重,在子标签这里永远是0
  2. a标签在浏览器中会被浏览器默认定制一个样式,所以如果a标签继承父类样式会被浏览器默认的样式覆盖掉。

复合选择器的权重叠加

当使用复合选择器时i,这个选择器的权重等于复合选择器中的几个选择器的权重的和。

  • div ul li ——————————> 0,0,0,3
  • .nav ul li —————————–>0,0,1,2
  • a:hover ——————————>0,0,1,1
posted @ 2022-06-02 18:57  brokyz  阅读(38)  评论(0编辑  收藏  举报