CSS继承

#

# CSS 属性继承

如果一个属性具备继承性，那么在该元素上设置后，它的后代元素可以继承这个属性
如果后代元素自己有设置该属性，那么优先使用后代元素的属性

# 具有继承性的属性

font-size, font-family, font-weight, color, text-align 等都具有继承性

# 常见继承属性

color, cursor, font-family, font-size, font-style, font-variant,
font, letter-spacing, line-height, list-style, text-align, text-indent,
text-transform, text-shadow, visibility, white-space, word-break, word-spacing,
word-wrap

# 注意：继承过来的是计算值，不是设置值

<style>
  div {
    color: red;
    font-size: 2em;
  }
</style>
<div>
  div内部的内容
  <p>P元素的内容</p>
</div>

1
2
3
4
5
6
7
8
9
10

这里 P 元素字体大小继承过来的是 div 元素字体的大小 32px(浏览器默认字体是 16px 的情况下)，是 div 元素计算过后的值

# 强制继承

<style>
  div {
    color: red;
    font-size: 2em;
    border: 1px solid red;
  }
  p {
    border: inherit; /* 强制继承父级元素的边框属性 */
  }
</style>
<div>
  div内部的内容
  <p>P元素的内容</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#CSS 继承

上次更新: 2022/06/28, 18:02:43

← background属性 CSS层叠性→