likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 244

1、层叠性

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

<style>
  div {
    color: red;
    font-size: 18px;
  }
  ...
  div {
    color: green;    /*和上方的红色冲突*/
  }
</style>

最终文字颜色显示为绿色。层叠性遵循的原则是就近原则,也就是哪个离结构近,哪个样式就会生效。(简单说后写的样式会覆盖前面写的)

在覆盖样式时,不冲突的属性不会被覆盖,比如上面的代码,最终 div 的字体大小仍为 18px。

2、继承性

在 CSS 中,子标签会继承父标签的某些样式,如文本颜色和字号。恰当地使用继承可以简化代码,降低 CSS 样式的复杂性。

<style>
  body {
    font-size: 18px;
    line-height: 24px;
  }
  div {
    font-size: 14px;
  }
</style>

<body>
  <!-- div 继承了 body 的行高 -->
  <div> 我的字体大小为 14px,行高为 24px </div>
  <!-- p 继承了 body 的字号和行高 -->
  <p> 我的字体大小为 18px,行高为 24px </p>
</body>

子元素可以继承的样式:text-,font-,line- 开头的属性,以及 color 属性

在继承性中,有一个特别的属性 —— line-height。
body {
  font: 12px/1.5 Microsoft YaHei;
}
div {
  font-size: 16px;
}
p {
  font-size: 14px;
  color: grey;
}

行高可以设置为具体的值,比如 18px,也可以不跟单位,比如 1.5,意思是行高为字体大小的 1.5 倍。上面 body 的行高为 12 * 1.5 = 18px。

如果子元素没有设置行高,则会继承父元素的行高。上面代码中,<div> 的行高为 16 1.5 = 24px,<p> 的行高为 14 1.5 = 21px。

body 行高 1.5 这样的写法可以让子元素根据自己文字的大小调整行高。

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. 等级判断从左向右比较,如果某一位数值相同,则判断下一位
  3. 继承的权重是0,如果该元素没有被直接选中,不管父元素权重多高,子元素得到的权重都是0
<style>
  /* .top 是类选择器,权重 0,0,1,0 */
  .top {
    color: red;
  }
  /* p 是元素选择器,权重 0,0,0,1 */
  p {
    color: yellow;
  }
</style>
<div class="top">
  <p>猜猜我是什么颜色?</p>  <!-- 我是黄色哦 -->
</div>

虽然 .top 的权重大于 p,但对 p 来说,.top 是继承自父元素的,其权重实际为 0,0,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

由于权重不会有进位,并且等级从左向右比较,所以 0,0,0,12 的权重依旧低于 0,0,1,0