是否可以为 :root 分配一个类？答案

【问题标题】：Is it possible to assign a class to :root?是否可以为 :root 分配一个类？
【发布时间】：2019-12-12 13:08:34
【问题描述】：

当我在考虑another problem of mine 的解决方案时，我试图了解 CSS 元素可以从其他元素继承到哪些扩展。具体有如下定义

.dark {
  background-color: black;
}
.light {
  background-color: white
}

是否可以以编程方式（可能使用 JS）将这些类之一分配给 :root 元素？

【问题讨论】：

【解决方案1】：

用JS就可以轻松搞定。

选择元素：

const root = document.querySelector(':root')

大家一起：

const root = document.querySelector(':root')
root.classList.add('light')

或者，与其拥有两个类，不如拥有一个:not() 选择器：

:root:not(.dark){
  background-color: white;
}
:root.dark{
  background-color: black;
}

【讨论】：

【解决方案2】：

我会为此使用（并且已经使用过）CSS 变量。

:root {
  --background-color: black;
}

.background {
  background-color: var(--background-color);
}

然后用 javascript 更改 CSS 变量。

【讨论】：

这实际上是我想要避免的——如果你可以看看我链接的问题，我想把 CSS 定义放在一个 CSS 文件（或<style>）中，这样我就可以做到不必通过 JS 更改它们（并将它们的定义保留在 JS 中）

【解决方案3】：

在 HTML 中，:root 等价于 <html> (doc)：

在 HTML 中，:root 代表元素，与选择器html，只是它的特异性更高。

一种可能的解决方案是将类应用于<html>：

document.getElementsByTagName("html")[0].classList.add('dark')

.dark {
  background-color: red;
}

<html>
hello
</html>

【讨论】：