CSS 的特性

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

CSS 的特性包括继承和层叠。

1. `CSS` 属性的继承

CSS 中有些属性是可继承的，何为属性的继承？
- 一个元素如果没有设置某属性的值，就会跟随父元素的值
- 当然，一个元素如果有设置某属性的值，就使用自己设置的值
比如 color、font-size 等文本相关的属性一般都是可以继承的
究竟哪些属性可以继承，不用死记硬背，用多了自然熟练。而且可以随时查阅官方文档找到答案
不能继承的属性，一般可以使用 inherit 值强制继承
浏览器开发者工具也会标识出哪些样式是继承过来的

一个元素如果有设置某属性的值，则会使用自己设置的值，比如下面的 a 元素：

div {
  color: red !important;
}

<div>
  我是 div 的内容<br>
  <span>我是一个 span</span><br>
  <a href="#">冰冰</a>
</div>

p 元素下不能放 div 元素，否则 html 结构会乱掉：

p div {
  color: red !important;
}

<p>
  <div>我是 div 的内容</div>
</p>

2. 继承的注意点

CSS 属性继承的是计算值，并不是当初编写属性时的指定值（字面值）

<!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>
    .box1 {
      font-size: 60px;
    }

    .box2 {
      /* font-size: 30px; */
      font-size: .5em;
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <p>哈哈哈</p>
    </div>
  </div>
</body>
</html>

3. `CSS` 属性的层叠

CSS 允许多个相同名字的 CSS 属性层叠在同一个元素上
- 层叠后的结果是：只有一个 CSS 属性会生效
- 基本层叠：当选择器相同时，后面的属性会把前面的属性层叠掉

浏览器的开发者工具非常清晰地显示了哪个 CSS 属性会生效

#box {
  color: red;
}
  
.word {
  color: green;
}
  
div {
  color: blue;
}

<div id="box" class="word">一段文字</div>

哪个 CSS 属性会生效，取决于 CSS 属性所处环境的优先级高低

4. `CSS` 属性的优先级

按照经验，为了方便比较 CSS 属性的优先级，可以给 CSS 属性所处的环境定义一个权值（权重）
- !important -> 10000
- 内联样式 -> 1000
- id 选择器 -> 100
- 类选择器、属性选择器、伪类 -> 10
- 元素选择器、伪元素 -> 1
- 通配选择器、后代选择器、兄弟选择器 -> 0
比较优先级的严谨方法
- 从权值最大的开始比较每一种权值的数量多少，数量多的优先级高，即可结束比较
- 如果数量相同，比较下一个较小的权值，以此类推
- 如果所有权值比较完后，发现数量都相同，则采用“就近原则”

举例 1：

/* （假设）下面两个选择器作用在了同一个标签上，优先级更高的是第一个，因为在 id 选择器数量一样的前提下，第一个的类选择器数量更多 */
.five#radio .one #three { /* 2 个 id 选择器、2 个类选择器 */
  color: blue;
}

#box #btn .four div span { /* 2 个 id 选择器、1 个类选择器、2 个元素选择器 */
  color: red;
}

<div id="box">
  <div id="btn">
    <div class="four five" id="radio">
      <div class="one">
        <span id="three">哈哈哈哈哈</span>
      </div>
    </div>
  </div>
</div>

举例 2：

#main {
  color: red;
}

.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10.box11.box12 {
  color: blue;
}

<div id="main" class="box1 box2 box3 box4 box5 box6 box7 box8 box9 box10 box11 box12">哈哈哈哈哈</div>

5. `CSS` 属性使用经验

为何有时候编写的 CSS 属性不好使，有可能是因为：
- 选择器的优先级太低
- 选择器没选中对应的元素
- CSS 属性的使用形式不对
  - 元素不支持此 CSS 属性，比如 span 默认是不支持 width 和 height 的
  - 浏览器不支持此 CSS 属性，比如旧版本的浏览器不支持 CSS3 的某些属性
  - 被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size
建议
- 充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错

1. CSS 属性的继承

2. 继承的注意点

3. CSS 属性的层叠

4. CSS 属性的优先级

5. CSS 属性使用经验

1. `CSS` 属性的继承

3. `CSS` 属性的层叠

4. `CSS` 属性的优先级

5. `CSS` 属性使用经验