了解 CSS 中样式的级联和流程

当我们使用 CSS 时，基本概念之一是了解如何将样式应用于网页。 “级联” 正是定义了当同一元素有多种样式时浏览器如何决定应用哪些 CSS 规则的机制。了解样式流以及级联的工作原理不仅可以提高我们作为开发人员的技能，还可以帮助我们编写更干净、更高效和可维护的 CSS 代码。

CSS中的瀑布是什么？

级联是CSS用来确定将哪些样式应用于页面上的元素的过程。此过程遵循基于三个主要因素的特定规则和优先级：

1. 特异性： 选择器的具体程度。

2. 重要性： 是否已应用 !important 属性。

3. 声明顺序：规则在样式表中所在的位置。

瀑布评估这些规则以决定应应用哪种样式。如果两个规则具有相同级别的特异性并且都不使用 !important，则浏览器将按照声明的顺序应用最接近样式表末尾的规则。

风格流如何运作

CSS 中的样式流是指根据样式规则的特殊性和位置应用样式规则的顺序。让我们来分解最重要的几点：

• 浏览器样式： 所有浏览器默认都会应用某些样式（例如 body 元素上的边距或无序列表 ul ）。这些样式首先应用，并且可以使用我们的自定义 CSS 规则覆盖。

• 外部样式：我们在外部样式表中定义的样式，通常与 HTML 中的 link 标签链接。这些样式比浏览器样式具有更高的优先级。

• 内联样式： 这些样式是通过 style 属性直接应用在 HTML 中的样式。它们具有更高的特异性，通常会覆盖外部样式表规则。

• 规则 !important: 使用 !important 赋予规则最高优先级，覆盖任何其他应用的样式，无论具体情况如何。

基本瀑布示例

让我们想象一个具有从不同位置应用的多个规则的元素：

HTML

假设我们的 CSS 中有以下规则

CSS

在这种情况下，文本将显示为蓝色，因为cascade 是最后一个定义的声明，并且与之前的声明具有相同的特异性。

但是你可能会遇到这种情况，虽然特异性和级联是相同的，但你将能够看到显着的变化。

CSS

在这种情况下，文本将显示为绿色，因为规则 color: green !important; 由于使用了 !important 具有最高优先级，这会忽略两个特殊性和级联。

申报订单示例

正如我之前提到的，如果我们有两条具有相同特性但在不同位置声明的规则，则样式表中较低的规则将适用：

该段落将为红色，因为该规则是在建立黑色的规则之后声明的。

---

管理样式级联和流的良好实践

1. 最小化 !important 的使用： 虽然在特定情况下很有用，但过度使用 !important 可能会使你的 CSS 难以维护和覆盖。仅在确实有必要的情况下使用它。

2. 使用类而不是 ID：类的特异性比 ID 低，可以更灵活地覆盖样式，而无需生成过于具体的 CSS。

3. 从一般到具体组织您的 CSS： 首先定义全局样式，然后继续讨论更具体的规则。这遵循逻辑流程并使代码更易于理解。

4. 对选择器进行一致的分组和排序：将影响相同元素的规则放在一起，以便更轻松地可视化瀑布并进行调整。

5. 记录规则！重要：如果您需要使用！重要，请记录原因。这将帮助您记住原因并降低代码混乱的风险。

---

特异性和级联可视化工具

有在线工具和浏览器扩展，可让您可视化选择器的特殊性并查看应用于特定元素的样式流。例如：

• Chrome DevTools：通过检查元素，您可以查看正在应用哪些 CSS 规则以及应用的顺序。

• 特异性计算器：特异性计算器等工具可让您计算选择器的特异性。

• CSS 统计信息： 一种资源，可让您查看 CSS 统计信息，包括选择器的特异性级别。

---

概括

样式的级联和流动是 CSS 的基本原则，但是充分理解它们可以对我们组织和管理样式的方式产生很大的影响。通过了解级联的应用方式，我们可以将 CSS 构建得更干净、更高效、更易于维护。

现在您了解了级联，您将能够更好地控制 CSS 样式并避免意外的覆盖问题！

以上是了解 CSS 中样式的级联和流程的详细内容。更多信息请关注PHP中文网其他相关文章！