【前端】CSS三大特性详解

深入理解 CSS 的三大特性CSS（层叠样式表）在网页开发中有着非常重要的地位，它不仅仅是用于美化网页的工具，更是实现网页布局和交互的核心技术之一。CSS 有三大重要特性：层叠性、继承性和特殊性（权重和优先级），掌握这些特性是精通 CSS 的重要步骤。本文将深入探讨这三大特性，并通过代码示例和场景解释，帮助您更好地理解 CSS 是如何工作的。What is CSS?

1. 层叠性（Cascading）层叠性是 CSS 中的基本概念之一。它描述了当多个 CSS 规则应用到同一个 HTML 元素时，如何处理这些规则的冲突。换句话说，就是当多个选择器定义了相同的属性时，哪些属性会被最终采用。层叠性的核心在于 解决样式冲突，特别是在大型项目中，有多个 CSS 文件或多层次样式的情况下。

1.1 层叠性是什么？层叠性是指当多个相同选择器为同一个元素指定了相同的样式属性时，这些样式属性会发生覆盖，也就是所谓的"层叠"。层叠性主要解决样式冲突的问题，这意味着我们可以为一个元素设置多个样式，并且根据一些特定规则来决定最终应用的样式。

层叠性决定了 CSS 如何处理样式冲突，以及它如何处理不同来源的样式，比如行内样式、外部样式表、以及浏览器默认样式之间的冲突。就近原则是层叠性的重要原则之一，即哪个样式离元素最近，就会覆盖其他相同属性的样式。

1.2 层叠性原则当元素的样式发生冲突时，遵循以下层叠性原则来决定哪个样式生效：

来源优先级：CSS 样式可以来自不同的来源，例如：浏览器默认样式、外部 CSS、内部嵌入样式表和行内样式（style 属性）。行内样式优先级最高，其次是内部嵌入样式表，接着是外部样式表，最后是浏览器默认样式。权重优先级：不同的选择器具有不同的权重，权重越高优先级越大（详细内容请见后文）。顺序优先级：如果样式的来源和权重都相同，则遵循就近原则，即后声明的样式会覆盖先声明的样式。1.2.1 示例代码语言：javascript代码运行次数：0运行复制

这是一个段落。

在上面的例子中，我们为

元素设置了两个不同的 color 样式，一个来自于

在这个例子中，

元素继承了 body 的 font-family 和 color 属性，但同时又具有了自己独立的 font-size 样式属性。

2.4 行高的继承性（line-height）行高是一个非常典型的可继承属性，可以使用百分比或单位进行定义。

代码语言：javascript代码运行次数：0运行复制body {

font: 14px/1.6 "Microsoft YaHei", sans-serif;

}在上面的例子中，line-height 使用了一个不带单位的数字 1.6，这意味着子元素将继承父元素的相对行高。在这种情况下，子元素的行高将根据自己的 font-size 动态调整，而不会固定继承一个具体的数值。

line-height: 1.5 和 line-height: 150% 的区别使用 line-height: 1.5 时，子元素会继承 1.5 这个比例，然后根据其自身的 font-size 来计算行高。使用 line-height: 150% 时，子元素继承的将是父元素计算后的实际行高值，而不是一个比例，因此改变子元素的字体大小不会影响到它的行高。

line-height1.5和line-height:150%的区别 父元素设置line-height:1.5会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line-height。

父元素设置line-height:150%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

3. 特殊性（Specificity）特殊性是 CSS 中最复杂的部分之一，它决定了当元素有多个选择器匹配时，究竟哪个样式会应用到元素上。特殊性通过一种类似 “权重” 的概念来衡量不同选择器的优先级。

3.1 特殊性计算规则CSS 特殊性的计算涉及一个 “四位数值” 的系统，这个系统通过不同的选择器类型给每个选择器赋予一个权重，从而帮助计算优先级。

继承或者 * 通配符的贡献值为 0,0,0,0。元素选择器（如 div）和伪元素（如 ::before）的贡献值为 0,0,0,1。类选择器（如 .class）、伪类（如 :hover）的贡献值为 0,0,1,0。ID 选择器（如 #id）的贡献值为 0,1,0,0。行内样式（如 style="color: red;"）的贡献值为 1,0,0,0。!important 声明的贡献值无穷大，通常用于强制覆盖其他样式。3.2 优先级注意点权重没有进位：特殊性的权重是由四组数字组成的，例如 0,1,0,1，每一位表示一个选择器类型的权重，不会有进位。权重的比较：从左向右逐位比较，如果某一位相同，则继续比较下一位数值。可以简单记忆： 继承和通配符的权重为 0。标签选择器的权重为 1。类选择器和伪类的权重为 10。ID 选择器的权重为 100。行内样式为 1000。!important 权重无穷大，用于覆盖所有其他样式。3.3 特殊性叠加如果一个选择器由多个部分组成，特殊性就会叠加。例如：

代码语言：javascript代码运行次数：0运行复制div ul li { /* 特殊性为 0,0,0,3 */

}

.nav ul li { /* 特殊性为 0,0,1,2 */

}

a:hover { /* 特殊性为 0,0,1,1 */

}

.nav a { /* 特殊性为 0,0,1,1 */

}

#nav p { /* 特殊性为 0,1,0,1 */

}

div#box { /* 特殊性为 0,1,0,1 */

}在上面的例子中，可以看出复合选择器的权重是通过多个简单选择器的权重叠加而得到的。权重越高，优先级越大。

3.4 !important 的使用!important 声明可以用来强制应用某个样式，而不考虑正常的权重计算规则。例如：

代码语言：javascript代码运行次数：0运行复制div {

color: blue !important;

}在这个例子中，无论其他选择器的特殊性如何，只要存在 !important，这个样式的优先级都是最高的。

3.5 特殊性冲突示例代码语言：javascript代码运行次数：0运行复制

特殊性示例文本

在这个例子中，

元素具有 id="box" 和 class="box"，而 #box 的特殊性为 0,1,0,0，大于 .box 的 0,0,1,0 和 p 的 0,0,0,1，因此文本最终会显示为红色。

4. 综合示例与总结为了更好地理解 CSS 的三大特性，我们来一个综合的例子：

代码语言：javascript代码运行次数：0运行复制

在这个例子中，展示了继承性、特殊性和层叠性之间的综合作用。通过多个选择器的组合，我们可以看到不同的样式如何相互影响，并最终形成页面的样式效果。

小结层叠性 允许多个来源的样式相互作用，并按照特定规则来解决冲突。继承性 使得子元素可以继承父元素的一些样式属性，简化了代码的编写和维护。特殊性 通过计算不同选择器的权重，确定同一元素的不同样式的优先级。

理解和掌握 CSS 的三大特性是构建复杂、可维护和高效的样式表的关键。希望这篇文章能够帮助您更好地理解这些概念，并在实际项目中加以灵活应用。