是否可以在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。
干杯!
: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>
: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);
}
已更新,包含子元素
: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