- CSS 教程
- CSS - 主页
- CSS - 简介
- CSS - 语法
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 边距
- CSS - 列表
- CSS - 填充
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS-Clearfix
- CSS-浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 翻译
- CSS - 高度
- CSS - 宽度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 导航栏
- CSS - 叠加
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS-根
- CSS - 盒子模型
- CSS - 计数器
- CSS - 剪辑
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS 高级
- CSS-弹性盒
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 媒体类型
- CSS - 分页媒体
- CSS-听觉媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - 重要
- CSS3 教程
- CSS3 - 教程
- CSS3 - 圆角
- CSS3 - 边框图像
- CSS3 - 多背景
- CSS3 - 颜色
- CSS3 - 渐变
- CSS3 - 阴影
- CSS3 - 文本
- CSS3 - 网页字体
- CSS3 - 二维变换
- CSS3 - 3D 变换
- CSS3 - 动画
- CSS3 - 多列
- CSS3 - 用户界面
- CSS3 - 盒子尺寸
- CSS 响应式
- CSS - 响应式网页设计
- CSS 资源
- CSS - 有用的资源
- CSS - 讨论
CSS-根
CSS 伪类:root旨在选择文档层次结构中的根元素。当应用于 HTML 时，:root特别指向 <html> 元素，其Behave与“html”选择器类似。尽管如此，值得强调的是，与“html”相比，:root具有更大的特异性。该选择器包括所有 HTML 元素或标签。
在 CSS 中声明全局变量时，使用:root会很有优势。
句法
:root {
// css declarations or property
--main-color: blue;
--secondary-color: white;
}
例子
这是显示:root用法的示例-
<html>
<head>
<style>
/* Define global variables */
: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>
例子
这是另一个示例，演示了如何使用: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: red;">var(--background-color)</span>.</p>
<a href="#" class="button">Demo</a>
</div>
</body>
</html>