logo标签列表

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

htmlcsspostcsscssnext
12

是否可以在ID或Class中使用:root选择器？我试图在另一页上改变颜色。

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

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

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

干杯！

2个回答
8
语法可能与您当前代码略有不同，但是您可以使用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>

5
语法应该是：

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

您可以在两个页面上使用相同的样式表，然后将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>

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

添加了子后代元素

: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的设置问题？ - cwahlfeldt
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接