使用类更改不同页面上的 :root 变量答案

【问题标题】：Change :root variables on different pages with a class使用类更改不同页面上的 :root 变量
【发布时间】：2018-06-12 13:20:52
【问题描述】：

是否可以将:root 选择器与ID 或类一起使用？我正在尝试在不同的页面上翻转颜色。

:root {
  --color-one: red;
  --color-two: blue;
}

/* Can something like this happen? */
.posts:root {
  --color-one: green;
  --color-two: yellow;
}

我想在引入类时覆盖根变量。我知道我可以用 JS 实现，但如果可能的话，我想使用纯 CSS。

干杯！

【问题讨论】：

标签： html css postcss cssnext

【解决方案1】：

语法可能与您在此处的语法略有不同，但可以肯定的是，这就是 CSS 的力量！

您可以覆盖任何类中的 css 变量。您不需要 :root 进行覆盖，如果您的覆盖值会影响整个页面，请将该类添加到 body 标记中。

:root {
  --color-one: red;
  --color-two: blue;
}

/* Overrides settings in :root */
.posts {
  --color-one: green;
  --color-two: yellow;
}



p {
  color: var(--color-one);
  background-color: var(--color-two);
}

<p>
Test
</p>
<p>
Test
</p>

<div class="posts">
<!-- just add this class to the body tag on your other page -->
<p>
Test
</p><p>
Test
</p>
</div>

【讨论】：

【解决方案2】：

语法是：

:root.post {
    /* cSS declarations */
}

您可以在 2 个页面上使用相同的样式表，然后将 posts 类应用于 HTML 元素。

:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

第 1 页：黄色背景上的绿色文字

用子代更新

:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

.special {
  color: #f0f;
  font-style: italic;
}

:root.posts .special {
  color: #f90;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

<html>
  <head>
  </head>
  <body>
    <p>
      ghjkghjkg
    </p>
    <p class="special">Special content</p>
  </body>
</html>

第 2 页：绿色背景上的黄色文字

用子代更新

:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

.special {
  color: #f0f;
  font-style: italic;
}

:root.posts .special {
  color: #f90;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}

<html class="posts">
  <head>
  </head>
  <body>
    <p>
      ghjkghjkg
    </p>
    <p class="special">Special content</p>
  </body>
</html>

【讨论】：

感谢您的回答，但我似乎无法让它工作。我在:root 之后设置:root.posts 变量，并且当引入posts 类时没有任何反应。也许是 postcss 设置？