CSS 中的 Root

2025年1月30日 | 阅读12分钟

CSS 中的“根”一词可能与层叠样式表语言中的许多概念和特性相关。CSS（或层叠样式表）是一种样式表语言，用于指定 HTML 或 XML 页面的呈现方式。本教程将全面介绍 CSS 中“根”的各种定义和应用，例如根元素、根伪类和文档树的根。

理解文档对象模型 (DOM)

要理解 CSS 中“根”的重要性，必须理解文档对象模型 (DOM) 所表示的 Web 文档结构。Web 浏览器使用页面对象模型 (DOM) 生成一个分层的树状结构，表示 HTML 或 XML 页面的内容和结构。它从文档对象的树基开始，通过一系列节点向下扩展，这些节点表示“文档”内部的元素及其关系。

由于它是将样式应用于网页元素的基础，因此这种分层结构对 CSS 至关重要。CSS 的“根”是指样式向下级联以影响其他组件的点，通常是“<html>”元素，它是此 DOM 结构中的最高级别元素。

根元素

在 CSS 术语中，“<html>”元素通常被称为“根”元素。这表示 HTML 文档的最外层元素，包含页面的所有内容。由于页面上的所有其他元素都继承应用于根元素的样式，因此这些样式会影响整个页面。这意味着您可以通过在根级别设置属性（例如背景颜色、默认字体和链接颜色）来为整个网站创建统一的外观。

DOM 结构中的最高级别元素，通常是“<html>”元素，在 CSS 中被称为“根”元素。此元素通常被称为“文档元素”或“根元素”。HTML 文档的根元素包含其所有内容，并作为应用 CSS 样式的基础。

可以使用以下方法选择和设置根元素的样式

html {
  /* CSS properties go here */
}

应用于根元素的样式可能会全局影响整个文档。例如，您可以配置网页的背景颜色、默认字体和其他全局变量。这通常是为您的网站提供统一外观和感觉的有用技术。

html {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

例如，假设您有以下 HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>Root Element Example</title>
</head>
<body>
  <p>This is some text.</p>
</body>
</html>

您可以通过向根元素（' <html> '）添加样式来更改适用于整个页面的属性，例如背景颜色和字体系列。

html {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
p {
  color: #333;
}

在此示例中，' <body> ' 中的 ' <p> ' 元素将包含在背景颜色和字体系列应用于整个页面的操作中。

':root' 伪类

CSS 中“根”的另一个应用是 ':root' 伪类，它与根元素不同。CSS 自定义属性，有时也称为 CSS 变量，与此伪类关联。使用自定义属性，您可以在 CSS 中创建可重用变量，这些变量可以保存任何类型的属性值，包括颜色和字体大小。

CSS 文档中的最高级别元素由 ':root' 伪类表示，它与 HTML 根元素 ('<html>') 不同。在此实例中，您的 CSS 代码中的顶层元素由 ':root' 表示。自定义属性通常根据约定在此伪类中定义。您将按如下方式使用 ':root' 定义和使用自定义属性

:root {
  --main-background-color: #f0f0f0;
  --main-text-color: #333;
}
body {
  background-color: var(--main-background-color);
  color: var(--main-text-color);
}

在此示例中，使用 ':root' 定义了自定义参数 '--main-text-color' 和 '--main-background-color'。然后，样式表中的其他部分可以使用这些自定义属性来设置 body 元素等的样式。当您像这样使用自定义属性时，您可以在一个位置（':root' 伪类）更改值，并使这些更改全局应用，从而简化网站维护和更新。

例如

假设您有使用 ':root' 伪类定义自定义属性的 CSS 代码

:root {
  --primary-color: #3498db;
  --secondary-color: #e74c3c;
}
button.primary {
  background-color: var(--primary-color);
  color: white;
}
button.secondary {
  background-color: var(--secondary-color);
  color: white;
}

在此示例中，':root' 伪类定义了自定义参数 '--primary-color' 和 '--secondary-color'。然后，可以使用这些属性来修改具有 '-primary' 和 '-secondary' 类的按钮的背景颜色。如果您选择更改主要或次要颜色，则 ':root' 伪类是唯一需要更改值的位置。

文档树的根

DOM 层次结构中的最高级别元素被称为文档树的“根”。在 HTML 文档中，这通常是 <html> 元素。使用 CSS 选择器时，理解文档树的根至关重要，因为它提供了选择页面元素的参考点。

例如，您可以在 CSS 选择器中使用 '>' 组合器来选择和设置作为根元素的直接子元素的样式。这使您能够定位 DOM 结构中根元素正下方的元素，深度为一层。

html > body {
  /* CSS properties go here */
}

在这里，我们选择 body 元素，它是 html（根）元素的直接子元素。这对于将样式应用于特定上下文中的元素很有帮助，例如根元素的直接后代。

作为示例，请考虑以下 HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>Root of the Document Tree Example</title>
</head>
<body>
  <header>
    <h1>Title</h1>
  </header>
  <main>
    <p>This is some content.</p>
  </main>
  <footer>
    <p>Footer text.</p>
  </footer>
</body>
</html>

在这种情况下，您可以使用文档树的根来定位 'html' 元素下的 'body' 元素

html > body {
  background-color: #f0f0f0;
}
main > p {
  font-size: 16px;
}

在此示例中，body 元素应用了背景颜色，main 内部的 p 元素应用了字体大小。header 和 footer 元素不受影响。

伪根元素

CSS 标准不包含 ':root' 伪元素。尽管如此，由于它偶尔会在特定的 CSS 框架和预处理器（如 Sass）中使用，因此将其作为一个概念进行讨论很重要。

您可能会在某些 CSS 预处理器（如 Sass）中遇到 ':root' 伪元素。就像 ':root' 伪类在纯 CSS 中用于自定义属性一样，:root 也可以在这些预处理器中用于为 CSS 变量建立全局作用域。

这是 Sass 中的一个示例

:root {
  $main-background-color: #f0f0f0;
}
body {
  background-color: $main-background-color;
}

此示例使用 '$main-background-color' 变量，该变量在 body 样式中的 ':root' 伪元素中声明。这是使用 Sass 等预处理器创建全局变量的方式。

请记住，将 ':root' 用作伪元素是某些 CSS 预处理器独有的，并且主流 CSS 规范不允许这样做。要获取有关如何实现您正在使用的预处理器的精确信息，查阅其文档至关重要。

媒体查询中的 ':root' 伪类

在 CSS 中，媒体查询用于根据视口或设备的属性应用样式。在此上下文中，全局变量或 CSS 属性（根据不同的屏幕尺寸或设备方向进行调整）有时会与媒体查询结合使用 ':root' 伪类进行设置。

例如，您可以在 ':root' 中为不同的屏幕尺寸提供不同组的自定义属性，然后使用媒体查询在它们之间切换

:root {
  --font-size: 16px;
  --line-height: 1.5;
}
@media (min-width: 768px) {
  :root {
    --font-size: 18px;
    --line-height: 1.6;
  }
}
body {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

在此示例中，变量 --font-size 和 --line-height 由 ':root' 定义。为了使这些变量适应更大的屏幕，媒体查询中定义了一组新值。然后，body 元素使用这些变量来设置其字体大小和行高。

当您将媒体查询与 ':root' 伪类结合使用时，您可以开发响应式设计，即它们可以适应多种屏幕尺寸和分辨率。

CSS 自定义属性和 ':root' 伪类

如前所述，':root' 伪类经常与 CSS 自定义属性（变量）结合使用。多亏了 CSS 变量，您可以在 CSS 中定义和使用您的变量，CSS 变量是在 CSS 中引入的。

以下是使用 CSS 自定义属性对 ':root' 伪类的一些典型用法的详细介绍

1. 指定独特功能

您可以在 ':root' 伪类中定义和设置自定义属性的值。自定义属性可以以两个连字符 (--) 开头，后跟一个名称，其值可以是任何有效的 CSS 值。

:root {
  --main-background-color: #f0f0f0;
  --main-text-color: #333;
  --font-size: 16px;
}

此示例中定义了三个自定义属性：'--font-size'、'--main-text-color' 和 '--main-background-color'。

2. 如何使用自定义属性

在指定自定义属性后，您可以在其他 CSS 代码段中使用它们。使用 'var()' 函数和自定义属性的名称来引用自定义属性。

body {
  background-color: var(--main-background-color);
  color: var(--main-text-color);
  font-size: var(--font-size);
}

3. 覆盖特定属性

在整个文档树中，自定义属性可以在不同级别被覆盖。如果在更具体的上下文中定义自定义属性，它将覆盖全局 (':root') 值。例如

:root {
  --text-color: #333;
}
.header {
  --text-color: #f00; /* Overrides the global --text-color */
}
body {
  color: var(--text-color); /* Will use the value from .header */
}

在此示例中，body 元素将使用 .header 元素中提供的颜色，因为 --text-color 自定义属性在 .header 元素中被覆盖。

主题和 :root 伪类

在网站主题化方面，:root 伪类与 CSS 自定义属性结合使用非常有效。通过主题化，您可以通过在预设样式集之间切换来改变网站的外观。Web 应用程序、内容管理系统以及任何其他向用户提供图形主题选择的网站都是常见的示例。

以下描述了如何使用自定义属性和 :root 伪类进行主题化

1. 主题变量定义

要开始自定义主题，请为您希望更改的每个元素定义自定义属性。对于各种主题，您可以指定背景颜色、文本颜色和链接颜色的参数。

:root {
  --background-color: #f0f0f0;
  --text-color: #333;
  --link-color: #3498db;
}

[data-theme="dark"] {
  --background-color: #333;
  --text-color: #f0f0f0;
  --link-color: #e74c3c;
}

在此实例中，我们在 :root 伪类中定义了与主题关联的自定义属性。对于深色主题，可以使用 [data-theme="dark"] 选择器定义一组替代的自定义属性值。

2. 利用主题

可以更改根元素 ('<html>') 或包含您要主题化的内容的任何其他元素上的 data-theme 属性以应用主题。可以更改属性值以启用动态主题切换。

<!DOCTYPE html>
<html data-theme="light">
  <!-- ... -->
</html>

此 HTML 示例中的 data-theme 元素最初设置为“light”，即默认主题。

3. 使用个性化属性修改样式

最后，通过使用自定义属性在您的 CSS 代码中实现主题特定的样式。例如，要使用主题独有的背景和文本颜色

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
a {
  color: var(--link-color);
}

body 和 a 等元素的样式将通过引用自定义设置自动调整到所选主题。

您可以使用 JavaScript 更改 data-theme 属性的值以在主题之间切换，样式将相应调整。此方法提供了一种有效且灵活的方式将主题化添加到您的网站或 Web 应用程序。

用户偏好设置和 :root 伪类

除了主题化之外，:root 伪类还可以用于支持用户偏好设置。您可以通过让人们改变网站的外观来改善可访问性和用户体验。

使用 :root 伪类和自定义属性，您可以通过以下方式尊重用户选择

1. 表征用户偏好变量

首先，定义与用户偏好值相对应的自定义属性。文本大小、配色方案以及设计的任何其他可修改元素都可以包含在这些偏好设置中。

:root {
  --font-size: 16px;
  --background-color: #f0f0f0;
  --text-color: #333;
}
[data-user-preference="larger-text"] {
  --font-size: 18px;
}
[data-user-preference="dark-mode"] {
  --background-color: #333;
  --text-color: #f0f0f0;
}

在此示例中，默认设计设置由 :root 伪类中定义的自定义属性表示。为了提供这些偏好设置的不同值，我们还使用属性选择器，例如 [data-user-preference="larger-text"] 和 [data-user-preference="dark-mode"]。

2. 允许个人偏好

您可以允许用户指定其偏好设置，以便他们可以个性化自己的体验。您可以通过调整网站或 Web 应用程序上的设置来完成此操作。当用户选择偏好设置时，您可以动态添加或更改根元素（通常是 <html>）上的 data-user-preference 属性。

<!DOCTYPE html>
<html data-user-preference="larger-text">
  <!-- ... -->
</html>

在此示例中，用户的文本大小偏好设置为“larger-text”，表示用户请求更大的文本大小。

CSS“根”的重要性

级联样式表基于 CSS 中的一个基本概念，称为“根”。此术语指的是 Web 文档中的基本元素或级别，样式从该元素或级别应用于其他元素。为了构建逻辑和美观的网站，Web 开发人员和设计师必须理解 CSS 中根的功能。

1. 文档对象模型 (DOM) 的层次结构

Web 文档的结构通过文档对象模型 (DOM) 分层表示。在 HTML 页面中，“根”元素（通常是 '<html>' 元素）位于此层次结构的顶部。此根元素包含所有其他元素，并作为文档的入口点。

CSS 样式可以向下级联树，并由于继承或覆盖样式而影响子元素，这要归功于将根元素置于顶部的层次结构。它是构建网页整个结构的基础，允许采用系统化的方式进行网页样式设置。

2. 全球风格的影响

根元素，通常表示为 html，对于建立 Web 文档的全局样式至关重要。应用于此元素的样式被视为页面的默认样式。这些样式可能包含各种设计功能，例如文本大小、背景颜色、字体选择和链接行为。

Web 开发人员可以通过在 Web 文档的根级别设置这些全局样式来在整个范围内建立设计统一性。这对于建立统一的用户体验尤其重要，因为它确保关键设计决策在整个网站中始终如一地实施。

3. 建立通用设计语言

Web 开发中设计的一致性是一个关键组件，它有助于消费者更自然地浏览网站。根元素可以创建一种渗透整个网站的一致设计语言。通过根级别的字体、颜色和间距规范，开发人员可以确保视觉上统一的体验。

清晰定义的设计语言展现了专业性并加强了品牌形象。通过允许开发人员修改一组根样式以更改全局设计，它还简化了开发过程。

4. 可维护性和模块化

自 CSS 引入 :root 伪类以来，根的影响力不断增强。一般来说，CSS 自定义属性（也称为 CSS 变量）与 ':root' 伪类相关。在 CSS 中，自定义属性使开发人员能够定义可在整个样式表中引用和更改的变量。

开发人员在 ':root' 伪类中定义这些自定义属性，这为这些变量提供了全局作用域。通过集中设计原则，此方法提高了模块化和可维护性，并促进了文档中样式的更新和适应。

5. 可变主题

CSS“根”的另一个重要用途是动态主题化，这是一项在 Web 开发中越来越受欢迎的功能。通过动态主题化，用户可以通过从各种预设主题中进行选择或通过个性化单个设计组件以适应他们的口味来更改网站的外观。

借助 CSS 自定义属性和 ':root' 伪类，通过允许开发人员快速切换全局样式集，动态主题化变得更加容易。通过更改一些根级别样式，用户可以在亮模式和暗模式之间切换，更改主题和调整配色方案。

下一主题HTML CSS 演练场

CSS 中的 Root

理解文档对象模型 (DOM)

根元素

':root' 伪类

文档树的根

伪根元素

媒体查询中的 ':root' 伪类

CSS 自定义属性和 ':root' 伪类

1. 指定独特功能

2. 如何使用自定义属性

3. 覆盖特定属性

主题和 :root 伪类

1. 主题变量定义

2. 利用主题

3. 使用个性化属性修改样式

用户偏好设置和 :root 伪类

1. 表征用户偏好变量

2. 允许个人偏好

CSS“根”的重要性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 中的 Root

理解文档对象模型 (DOM)

根元素

':root' 伪类

文档树的根

伪根元素

媒体查询中的 ':root' 伪类

CSS 自定义属性和 ':root' 伪类

1. 指定独特功能

2. 如何使用自定义属性

3. 覆盖特定属性

主题和 :root 伪类

1. 主题变量定义

2. 利用主题

3. 使用个性化属性修改样式

用户偏好设置和 :root 伪类

1. 表征用户偏好变量

2. 允许个人偏好

CSS“根”的重要性

相关帖子

Image Overlay CSS

CSS Multiple Classes

Smooth Scroll CSS

CSS Not Selector

CSS Rotate Text

CSS 中的图片文字叠加

CSS Border Radius Circle

CSS Float Center

Skeleton CSS

Link Style CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器