CSS 选择器：select 元素基于最后 parent 和特定 class？

Question

我有一些类可以将背景颜色应用于 div：

.bg-light: white;
.surface-light: light-gray;

.bg-dark: black;
.surface-dark: darker-gray;

问题是当我尝试将自定义颜色应用于这些 div 中的元素时，例如文本、按钮、边框等。我正在尝试这样做：

.bg-light input,
.surface-light input {
    color: black;
}

.bg-dark input,
.surface-dark input {
    color: white;
}

但它不适用于这样的场景：

light:
  dark:
    light:
        other-classes...: input

因为输入选择在两种情况下都为真，并且将设置最后定义的颜色。所以我需要做一个选择只考虑最后一个 'ascendent' parent.

有什么想法吗？感谢您的帮助。

Answer 1

我想我用变量解决了它：

.bg-light {
  background-color: var(--clr-bg-light);
}
.surface-light {
  background-color: var(--clr-surface-light);
}
.bg-light, .surface-light {
  --clr-text: var(--clr-text-dark);
  --clr-neutral: var(--clr-neutral-dark);
}

.bg-dark {
  background-color: var(--clr-bg-dark);
}
.surface-dark {
  background-color: var(--clr-surface-dark);
}
.bg-dark, .surface-dark {
  --clr-text: var(--clr-text-light);
  --clr-neutral: var(--clr-neutral-light);
}

.text { color: var(--clr-text); }
.neutral { color: var(--clr-neutral); }

CSS 选择器：select 元素基于最后 parent 和特定 class？

CSS Selector: select element based on last parent with specific class?

css

css-selectors