HTML + CSS 连载 | 11 - CSS 属性的继承和层叠特性

一、CSS 属性的特性-继承性

CSS 的某些属性具有继承性，如果一个 CSS 属性具备继承性，那么在该元素上设置可继承的属性后，他的后代元素都可以继承这个属性，如果后代们元素也设置该属性，那么优先使用后代元素自己的属性值。

常见的文本和字体有关的属性都是可继承属性，如 font-size font-family font-weight line-height color text-align 都具有继承性。

常见的继承属性有：

对于不知道是否具有继承性的元素我们可以通过 MDN 文档来查询，如下所示：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.box {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>我是h1</h1>
    <p>
      我是p
      <span>p的子元素span</span>
      <strong>p的子元素strong</strong>
    </p>
    <span>我是span</span>
  </div>
</body>
</html>

在浏览器中打开该页面，可以看到 color 属性及属性值都被继承了。

但是需要注意的是继承过来的是计算值，而不是设置值。

在遇到倍数相关的属性值设置时，子元素继承的是计算后的值，而不是倍数。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      color: red;
      /*相对于父元素字体的2倍，body html 默认字体大小是16px*/
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div class="box">
    我是box部分
    <!-- p元素中字体大小会继承 div 元素的字体计算后的值，即32px -->
    <p>我是p元素</p>
  </div>
</body>
</html>

继承 2em 后，实际的大小为 32px，倍数参考的还是父类的参考依据，即 body 元素的默认字体大小 16px。

对于某些不具有继承特性的属性，我们可以在子元素通过设置使该元素具备继承性。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      color: red;
      border: 2px solid peru;
    }

    /* 强制继承 */
    .box p {
      border: inherit;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>我是p</p>
    <h1>我是h1</h1>
  </div>
</body>
</html>

在浏览器打开页面，border 属性是不具备继承性的，但是通过设置可以强制性的使 border 属性具备继承性。

二、CSS 属性的特性-层叠性

对于一个元素的属性，我们可以通过不同的选择器进行设置的，并且这些属性会被一层一层覆盖上去，最终只有一个生效，哪个选择器设置的样式会生效？

在前面的内容中我们已经举例过关于 CSS 样式的覆盖的例子，同一个元素的同一个属性设置不同的值会被最后一个设置的值覆盖，那么除了先后顺序还有就是跟使用的选择器的权重有关了。

具体有两个判断方式：

方式一：根据选择器的权重，选择器的权重的生效，优先级就高
方式二：根据选择器的先后顺序，权重相同时，后面的选择器的设置就会生效

CSS 属性的权重如下：

!important：10000
内联样式：1000
id 选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0

权重的计算方式如下：

选择器	百	十	个
h1	0	0	0
h1 + p::first-line	0	0	3
li > a $href+="en-US"$ > .inline-warning	0	2	2
#info	1	0	0

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div .box {
      color: red !important; /*选择器权重 10000*/
    }

    #main {
      color: orange; /*id选择器权重 100*/
    }

    .box {
      font-size: 10px; /*类选择器 10*/
    }

    .name {
      font-size: 30px;
    }

    * {
      color: aquamarine;
    }
  </style>
</head>
<body>
  <div id="main" class="box name info" style="color: blue;">
    我是box
  </div>
</body>
</html>

浏览器打开 HTML，效果如下：

可以看到最终的效果是根据权重大小生效的。