CSS 三大特性🎨

CSS 三大特性是前端开发中所必用到的

下面来解释一下三大特性的概念与规则

拉架的层叠性

CSS 的全名为层叠样式表，所以可见层叠性的重要性。

1. 特性：层叠性主要用于解决<strong style="color:orange;">样式冲突</strong>, 也就是拉架。

<strong style="color:orange;">样式冲突</strong>:一个元素被多种选择器添加了相同的属性，那么将按最底部的属性值来渲染

2. 原理：这与浏览器的渲染原理有关

3. 在打开一个网页时，浏览器会先下载文档（也就是我们的 document），加载文档的 head 样式资源

4. 依次加载 dom 与样式，所以同权重情况下下面的样式会覆盖上面的样式

5. 案例时间：

<div>层叠</div><style>    div{      width: 300px;      height: 150px;      background-color: red;      background-color: rgb(43, 159, 226);      color:pink;      color:#fff;    }    div{      color:rgb(236, 240, 236);    }  </style>

如图所示：div 的背景颜色：rgb(43, 159, 226)；字体颜色：color:rgb(236, 240, 236);

功名利禄的权重

因为层叠是对同权重的规则，所以权重的出现会直接打破层叠的规则，即谁的权重大谁就被渲染

1. 概念：CSS 权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式

2. 规则：

3. Name	0，0，0，0
   元素	0，0，0，1
   类/伪类	0，0，1，0
   ID	0，1，0，0
   行内式	1，0，0，0
   !import	无穷大

4. 案例时间：

<p id="txt" class="txt">CSS的权重</p><style>    #txt{        color: black;    }    p .txt{        color: blue;    }</style>

图片所示：段落的颜色最后为黑色，而按层叠来讲颜色应该是蓝色，这就是因为 id 选择器的权重较大，所以最后渲染为黑色。

子承父业的继承

html 标签拥有父子关系，那么在其元素上也有子承父业的规则

1. 概念：子标签会继承父标签的能继承的样式

2. 可继承的属性：字体，文本，元素可见性，等等

3. 不可继承的属性：盒子模型属性，北京属性，定位属性，outline，display

4. 案例时间

    <div class="father">        父亲        <p class="son">儿子</p>    </div>    <style>        .father {            width: 300px;            height: 200px;            font-size: 20px;            font-weight: 700;            text-align: right;            background-color: rgb(0, 98, 128);            color: rgb(241, 243, 239);            position: relative;        }
        .son {            width: 50%;            height: 90%;            background-color: rgb(0, 183, 255);            position: absolute;            bottom: 0;            left: 0;            color: #fff;        }    </style>

图片所示：子标签继承了父元素的字体颜色，文本，没有继承定位等。

PS：

1. 子标签继承过来的元素的权重据文献表明为 0.1，即我们用元素选择器就可以覆盖掉继承的属性

2. 为什么要用继承呢？因为继承减少了代码冗余，降低 CSS 的复杂性

3. 合理运用 CSS 三大特性，在开发大量中减少了样式 bug，减少秃头。