看了就会，3 分钟搞明白 CSS 层叠是怎么回事

最新推荐文章于 2024-07-09 22:33:51 发布

前端小目标

最新推荐文章于 2024-07-09 22:33:51 发布

阅读量628

点赞数 9

分类专栏： # CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_30094821/article/details/136562190

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1. 基础知识

什么是 CSS 层叠

CSS 层叠是一种控制网页元素样式的机制。

当多条样式规则指向同一个元素时，浏览器会根据一系列优先级规则来决定哪条规则最终生效。

为何要使用 CSS 层叠

CSS 层叠让网页设计变得灵活且高效。它可以帮助我们解决样式冲突，避免代码冗余，并确保网站在不同设备和浏览器上都能保持一致的外观和体验。

如何使用 CSS 层叠

根据层叠的规则，行内样式、内部样式、外部样式这3种样式表的优先级是：

行内样式 > 内部样式 > 外部样式

在此基础上，还需要理解几个通用的层叠规则：

重要性：!important 标记的样式具有最高的执行权重。

专用性：更具体的选择器将优先于通用选择器。

源代码顺序：在其他条件相同的情况下，后出现的样式会覆盖先出现的样式。

2. 示例演示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>层叠示例1</title>
  <link rel="stylesheet" href="external.css">
  <style>
    p {
      font-size: 30px;
      color: red;
    }
</style>
</head>
<body>
  <p style="font-size: 24px;">Hello, CSS!</p>
</body>
</html>

在这个例子中，h1 元素的样式可以来自三个不同的来源：

外部样式 (external.css)：

/* external.css */
p {
  font-size: 20px;
  font-weight: bold;
}

内部样式 (style 标签)：

p {
  font-size: 30px;
  color: red;
}

行内样式 (style 属性)：

<p style="font-size: 24px;">Hello, CSS!</p>

根据层叠的规则，样式表的优先级是：

行内样式 > 内部样式 > 外部样式

因此，p 元素最终的样式将包含来自这三个来源的样式：

字体加粗来自外部样式。

文本颜色来自内部样式。

字体大小来自行内样式。

这样，最终的 p 元素会同时具有这三个样式的特征，展现出混合的效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>层叠示例2</title>
    <style>
      /* 通用选择器，低专用性 */
      p {
        color: blue;
      }
      /* 类选择器，高专用性 */
      .highlight {
        color: red;
      }
      /* ID选择器，更高专用性 */
      #special {
        color: green;
      }
      /* 同ID选择器，但后出现，将覆盖前者 */
      #special {
        color: purple;
      }
</style>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p id="special">This is a special paragraph.</p>
  </body>
</html>

第一个 p 元素将呈现为蓝色，因为只有一个基本的元素选择器作用于它

第二个 p 元素有一个类选择器 .highlight ，它比元素选择器更具体，因此文本将是红色。

最后一个 p 元素有两个 ID 选择器作用于它，但由于层叠的源代码顺序规则，它将呈现为紫色，因为后出现的 ID 选择器覆盖了前面的绿色样式。