CSS 三大特性

CSS三大特性概览：

CSS层叠性
CSS继承性
CSS优先级
- CSS特殊性

CSS三大特性

CSS层叠性

所谓层叠性是指各种CSS样式的叠加。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

示例如下：

<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
          /* 一下两个样式中 color 冲突了，按照CSS的书写顺序，会执行最后 一个 div 中的全部特性*/
          div {
               color: royalblue;
          }
          div {
               color: salmon;
               font: 700 14px;
          }
          
     </style>
</head>
<body>
     <div>
          <div class="rgba"></div>
     </div>
     <br/><br/>
     <div> CSS层叠性 </div>
</body>
</html>

页面效果如下:

CSS继承性

所谓继承性就是指书写CSS样式表时，子标签会继承父标签的某些样式；

示例

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
          /* CSS继承性：对于p 标签中的文字并未设置样式时，会继承div中的某些特性，一般多是与文字相关的才会继承。 */
          div {
               color: rgb(112, 17, 236);
               font: 700 14px;
          }
          
     </style>
</head>
<body>
     <div>
          <div class="rgba"></div>
     </div>
     <br/><br/>
     <div> 
          <p>CSS继承性</p>     
     </div>
</body>
</html>

页面效果如下：

CSS优先级

定义CSS样式时，经常会出现两个或多个规则应用在同一元素上，这是就会出现优先级的问题，也就是我们所说的权重；
关于CSS权重，可以用一套公式进行计算，这个就是CSS specificity，我们称为CSS特性或非凡性；

权重大小：

标签选择器 < 类选择器 = 伪类选择器 < id选择器 < 行内样式（直接在标签中书写style属性）< !important；
当权重相同时，遵循就近原则。
继承权重为0。