【Web前端】理解 CSS 层叠、优先级和继承

一条晒干的咸魚

已于 2024-10-23 22:55:55 修改

阅读量1.4k

点赞数 43

分类专栏： Web前端文章标签：前端 javascript css web前端 html

于 2024-08-21 15:03:08 首次发布

本文链接：https://blog.youkuaiyun.com/LEECOO666/article/details/141393296

版权

Web 开发中，CSS (Cascading Style Sheets) 是决定网页视觉呈现的关键技术之一。它为 HTML (Hypertext Markup Language) 提供样式，使得开发者能够控制页面布局、字体、颜色和其他视觉元素。然而，CSS 的强大功能伴随着一定的复杂性，尤其是在处理层叠、优先级和继承这些核心概念时。

一、CSS 的层叠规则

什么是层叠？

"层叠" (Cascade) 是 CSS 的核心概念之一。简单来说，层叠描述了当多个 CSS 规则应用到同一个 HTML 元素时，浏览器如何确定哪些规则最终会生效。CSS 中的 "层叠" 概念来源于其名称中的 "Cascading" 一词，这意味着当有冲突的样式规则时，它们会像瀑布一样层层叠加，最终的样式由最优先的规则决定。

冲突规则

在实际应用中，同一个 HTML 元素可能会匹配多个 CSS 规则。这些规则可能来自不同的样式表，或者即使在同一张样式表中，也可能有多个选择器同时匹配同一元素。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            color: blue;
        }

        .highlight {
            color: red;
        }

        #special {
            color: green;
        }
    </style>
</head>
<body>
    <p id="special" class="highlight">这是一个段落。</p>
</body>
</html>

在上述例子中，p 元素同时匹配了三条不同的规则，它们分别是：

选择器 p（选择所有的段落元素）
类选择器 .highlight（选择带有 highlight 类的元素）
ID 选择器 #special（选择 ID 为 special 的元素）

理解优先级

CSS 冲突规则的解决依赖于 "优先级" (Specificity) 的概念。优先级是根据选择器的类型来确定的，每种类型的选择器都被赋予了不同的权重。

元素选择器 (如 p) 的权重最低。
类选择器 (如 .highlight) 的权重高于元素选择器。
ID 选择器 (如 #special) 的权重最高。

权重的计算通常可以通过以下方式理解：

ID 选择器：权重为 100
类选择器、伪类选择器、属性选择器：权重为 10
元素选择器、伪元素选择器：权重为 1

在我们的例子中：

p 选择器的优先级为 1
.highlight 选择器的优先级为 10
#special 选择器的优先级为 100

由于 #special 选择器的优先级最高，因此最终应用的颜色是绿色 (color: green;)。

代码示例：优先级的比较

为了更好地理解优先级的概念，我们可以通过以下示例进行对比：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            color: blue;
        }

        .highlight {
            color: red;
        }

        .highlight p {
            color: orange;
        }

最低0.47元/天解锁文章