CSS - root

：root CSS 伪类旨在选择文档层次结构中的根元素。当应用于 HTML 时，：root 专门指向 <html> 元素，其行为类似于 'html' 选择器。尽管如此，值得强调的是，与“html”相比，：root具有更大的特异性。此选择器包含所有 HTML 元素或标记。

在声明全局 CSS 变量时，使用：root 可能是有利的。

语法


:root {
	 // css declarations or property
	 --main-color: blue;
	 --secondary-color: white;
}

CSS root - 声明全局 CSS 变量

下面是一个示例，显示了：root 的用法 -


<html>
<head>
<style>
	 	 :root {
	 	 	 --main-color: blue;
	 	 	 --secondary-color: white;
	 	 }
	 	 body {
	 	 	 background-color: var(--main-color);
	 	 }
	 	 h1 {
	 	 	 color: var(--secondary-color);
	 	 }
</style>
</head>
<body>
	 <h1>Welcome to CSS Root Example</h1>
	 <p>This is an example of using CSS root to define and use custom CSS variables.</p>
</body>
</html>

CSS 根 - 设置不同元素的样式

这是另一个示例，演示了如何使用：root 选择器来设置不同元素的样式 -


<html>
<head>
<title>:root Example</title>
<style>
	 	:root {
	 	 	 --primary-color: #007bff;
	 	 	 --secondary-color: #6c757d;
	 	 	 --background-color: #fcfc90;
	 	}

	 	body {
	 	 	 background-color: var(--background-color);
	 	 	 color: var(--secondary-color);
	 	 	 font-family: Arial, sans-serif;
	 	}
	 	h1 {
	 	 	 color: var(--primary-color);
	 	}
	 	p {
	 	 	 margin-bottom: 1rem;
	 	}

	 	.container {
	 	 	 max-width: 800px;
	 	 	 margin: 0 auto;
	 	 	 padding: 2rem;
	 	 	 background-color: LightYellow;
	 	 	 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	 	}
	 	.button {
	 	 	 display: inline-block;
	 	 	 padding: 0.5rem 1rem;
	 	 	 background-color: var(--primary-color);
	 	 	 color: white;
	 	 	 text-decoration: none;
	 	 	 border-radius: 4px;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <h1>:root Example</h1>
	 	 	 <p>This is an example of using the <code>:root</code> selector to define global CSS variables.</p>
	 	 	 <p>The primary color is set to <span style="color: var(--primary-color);">var(--primary-color)</span>.</p>
	 	 	 <p>The secondary color is set to <span style="color: var(--secondary-color);">var(--secondary-color)</span>.</p>
	 	 	 <p>The background color is set to <span style="background-color: var(--background-color); color: white;">var(--background-color)</span>.</p>
	 	 	 <a href="#" class="button">Demo</a>
	 	</div>
</body>
</html>

本页