如何使用 CSS 中的 :root 伪类选择器

简介: 如何使用 CSS 中的 :root 伪类选择器

了解 CSS 的 :root 伪类选择器,以及在项目中可能想要如何使用它!

CSS 的 :root 伪类选择器用于选择给定规范的最高级父级。在 HTML 规范中,:root 本质上等同于 html 选择器。

在下面的 CSS 片段中,:roothtml 样式将执行相同的操作:

:root {
  background-color: gray;
}
html {
  background-color: gray;
}

如果你注意到我说 :root 本质上等同于 html 选择器。事实上,:root 选择器比 html 具有更高的优先级。这是因为它实际上被视为伪类选择器(就像 :first-child:hover 一样)。

作为伪类选择器,它比标签选择器具有更高的优先级:

:root {
  background-color: blue;
  color: white;
}
html {
  background-color: red;
  color: white;
}

尽管 html 选择器出现在后面,:root 选择器仍然胜出,这要归功于它更高的优先级!

跨规范

在 HTML 规范中,:root 伪类针对最高级父级:html

由于 CSS 也设计用于 SVG 和 XML,你实际上可以使用 :root,它将对应到不同的元素。

例如,在 SVG 中,最高级父级是 svg 标签。

:root {
  fill: gold;
}
svg {
  fill: gold;
}

与 HTML 类似,:rootsvg 标签选择相同的元素,但 :root 选择器的优先级更高。

实际用途

:root 有什么实际用途?正如我们之前所介绍的,它是 html 选择器的安全替代品。

这意味着你可以做任何你通常会用 html 选择器做的事情:

:root {
  margin: 0;
  padding: 0;
  color: #0000FF;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

如果你愿意,你可以重构这段代码,使用 CSS 自定义属性在全局级别创建变量!

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}
p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

使用 :root 而不是 html 的额外好处是你可以为你的 SVG 图形设置样式!🤯

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}
svg {
  font-family: var(--body-fonts);
}
svg circle {
  fill: var(--primary-color);
}


目录
相关文章
|
3月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
46 1
|
3月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
50 1
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
37 2
CSS3 新增伪类有那些
CSS3 引入了多种新伪类,增强了样式控制的灵活性。新增的结构伪类如 `:nth-child(n)` 和 `:first-of-type` 可以根据元素的位置和类型进行选择;状态伪类如 `:enabled` 和 `:checked` 则根据元素的状态进行选择;动态伪类如 `:hover` 和 `:active` 则基于用户的交互行为。这些伪类让样式定制更加多样和强大。
|
3月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
94 1
|
2月前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
38 0
|
2月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
22 0
|
3月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
4月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
33 1