Question

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

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

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

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

干杯！

Answer 1

语法可能与您在此处的内容略有不同但确定可以，这就是CSS的强大功能！

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

＆＃13;

: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);
}

＆＃13;

<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>

＆＃13;

Answer 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页：黄色背景上的绿色文字

已更新为子女后裔

＆＃13;

: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);
}

＆＃13;

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

＆＃13;

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

已更新为子女后裔

＆＃13;

: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);
}

＆＃13;

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

＆＃13;

更改：具有类的不同页面上的根变量

2 个答案:

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

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