CSS 选择器（如果父级有类）

Question

现在有了 CSS 嵌套，如果我使用“深色”或“浅色”模式的主体级类，我希望通过引用父级来为嵌套深处的选择器设置属性：

body{
  .header{
    .button{
      .image{
        background-color: white;
      .image::has-parent(.dark-mode){ <-- something like this
        background-color: black;
...

我认为这违反了一些核心 CSS 原则，但我想我会问以防万一！有替代技术吗？

这与 :has 选择器不同（据我所知），因为 :has 意味着有孩子或兄弟姐妹。没有选择器可以选择它是否有父级。

这是一个示例片段：

div{
 &.dark{
   background-color:black;
 }
 .child{
   /* doesn't work */
   &:has(.dark){
     color:white;
   }
 }

<div>
 <div class="child">Should be dark text on white background</div>
</div>

<div class="dark">
 <div class="child">Should be white text on dark background</div>
</div>

Answer 1

有很多方法可以做到这一点，但它们都会导致嵌套地狱并试图覆盖事物。

我建议改用CSS变量，你可以定义一组变量来控制你的主题配色方案。例如：

body.light-mode {
  --theme-text-color: black;
  --theme-background-color: white;
}
body.dark-mode {
  --theme-text-color: white;
  --theme-background-color: black;
}

然后对于你的图像CSS，你可以参考：

.image {
  background-color: var(--theme-background-color);
}

这将使您能够将基于主题的设置轻松组织在一个位置，然后只需在代码库的其余部分中引用它们即可。例如，如果您想将暗模式背景从

black

更改为

#222222

，而不需要对引用它的每个元素进行更新，这也很有帮助