【CSS004】CSS的三大特性

日期：2021年11月01日
作者：Commas
签名：一分耕耘，一分收获……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关CSS的知识，那么请点《CSS学习的奇妙之旅》

---

---

一、三大特性概述

CSS的三个特性是指层叠性、继承性以及优先级。

二、层叠性

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。不同样式进行叠加，相同样式按照层叠性的规则进行最终的渲染效果（也可以说是覆盖，相同就按照某种规则进行样式的覆盖）。

简而言之，相同覆盖，不同保留，这就是层叠性；

举个例子来说明一下吧，如下所示：
先写了一个20px的红色字体的样式

div { color: red; font-size:20px; }

再写了一个红色字体的样式

div { color: green; }

最终效果如下所示：

这说明了，相同的颜色属性被覆盖了，不同的字号属性被保留了。

三、继承性

继承性是指在嵌套关系的元素之间，子标签会继承父标签的某些样式，如文本颜色、字体大小、行高等等。一般情况下，我们可以这样理解，子标签继承父标签的字体属性和文本属性。
不清楚字体属性和文本属性的小伙伴，可以翻看我之前的文章《【CSS001】CSS基础入门总结》

举个例子，我们有两个标签，父标签div设置样式，子标签p不设置样式：

div { color: red; font-size:20px; }

最终效果如下所示：

这说明了，子标签p继承了父标签div的样式。

四、优先级

当一个元素被多个选择器指定时，就会产生优先级，如下图所示：

选择器权重我们可以用4组点分开的数来比较，没组数永不进位，按从左往右依次比较，可以表示为：

选择器	权重
继承 或 *	0.0.0.0
元素选择器	0.0.0.1
类选择器，伪类选择器	0.0.1.0
ID选择器	0.1.0.0
行内样式style=""	1.0.0.0
!important	+∞

举个例子，如下：

div { color: red; font-size:20px; }
div p { color: green; }
.main p { color: blue; }

最终字体颜色为blue，那么我们可以分析下：

• div { color: red; font-size:20px; }的权重为0.0.0.0，因为p继承div的样式；
• div p { color: green; }的权重为0.0.0.2，因为复合选择器，权重会叠加，0.0.0.2=0.0.0.1（div）+0.0.0.1（p），每组数自己相加减，永远不进位；
• .main p { color: blue; }的权重为0.0.1.1，因为复合选择器，权重会叠加，0.0.1.1=0.0.1.0（.main类选择器）+0.0.0.1（p），每组数自己相加减，永远不进位；

经由分析，我们得出的结果和最终的显示效果是符合的。

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/121078128