我有以下代码:

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="color-wrapper">
    Hello world
  </div>

  <input id="dark-mode" type="checkbox">
  <label for="dark-mode">Dark mode</label>
</body>
<style>
:root {
  --bg: pink;
}

#dark-mode:checked ~ #color-wrapper {
  --bg: orange;
}

#color-wrapper {
  background: var(--bg);
}
</style>
</html>

它必须更改"Hello world"文本的背景 colored颜色 ,然后我选中复选框,但它不会, colored颜色 始终是粉色.有什么问题吗?

推荐答案

波浪号 Select 器~在元素之后 Select sibling 项,因此更改您的html中元素的顺序以修复:

:root {
  --bg: pink;
}

#dark-mode:checked ~ #color-wrapper {
  --bg: orange;
}

#color-wrapper {
  background: var(--bg);
}
  <input id="dark-mode" type="checkbox">
  <label for="dark-mode">Dark mode</label>
    <div id="color-wrapper">
    Hello world
  </div>

Html相关问答推荐

当ul为Flex时,使ul元素在指定高度内可垂直滚动

值更新时旋转数字动画

损坏的可点击html邮箱签名

Angular /HTML5不会播放本地文件夹中的音频mpeg

更改垫子输入的涟漪 colored颜色

平移变换下的SVG剪辑路径行为

如何在HTML中适当地为单选按钮网格添加标签?

可以';t使我的导航栏在HTML/CSS中正确对齐

为什么溢出时overflow: auto框的底部有一个小间隙?

如何用js和CSS在两点之间画一条线

如何在CSS伪类函数中使用复合 Select 器:host-context()