如何将班级风格应用于除特定班级及其孩子之外的所有班级？

Question

html

<ul class="style-b">
  <li>Item One</li>
  <li>Item Two
    <ul>
      <li>2.1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>Item Three
    <ul class="style-a">
      <li>3.1
        <ul>
          <li>3.1.1</li>
          <li>3.1.2</li>
          <li>3.1.3
            <ul class="style-b">
              <li>3.1.3.1</li>
              <li>3.1.3.2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>3.2</li>
    </ul>
  </li>
</ul>

少

.style-b {
  li {
    color: rebeccapurple;
  }
}
.style-a {
  li {
    color: black;
  }
}

结果图

.style-a

具有更高的优先级，因此嵌套的

.style-b

不起作用。 我将css样式简化为一级嵌套

li

样式，实际上我的项目中有多个嵌套类。

我尝试使用

:not()

来排除另一个，但似乎内部的复合选择器是被禁止的。

.style-b *:not(.style-a *) {
  li {
    color: rebeccapurple;
  }
}
.style-a *:not(.style-b *) {
  li {
    color: black;
  }
}

我现在添加另一个类

.important

来提高优先级，并在嵌套类中添加

important

。 但它只能支持两级嵌套，真是愚蠢。

._styleA() {
  li {
    color: black;
  }
}
._styleB() {
  li {
    color: rebeccapurple;
  }
}
.style-a {
  ._styleA()
}
.style-a.important {
  ._styleA()
}
.style-b {
  ._styleB()
}
.style-b.important {
  ._styleB()
}

Answer 1

您可以像这样选择

style-b

ul.style-b > li

ul.style-b > li {
    color: rebeccapurple;
}

.style-a li {
    color: black;
}

<ul class="style-b">
  <li>Item One</li>
  <li>Item Two
    <ul>
      <li>2.1</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>Item Three
    <ul class="style-a">
      <li>3.1
        <ul>
          <li>3.1.1</li>
          <li>3.1.2</li>
          <li>3.1.3
            <ul class="style-b">
              <li>3.1.3.1</li>
              <li>3.1.3.2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>3.2</li>
    </ul>
  </li>
</ul>

Answer 2

我终于弄清楚我的问题是如何实现嵌套主题。我发现 React UI 框架

ant design

的嵌套主题满足了我的需求。