Question

<><><><>>>>>

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

<>0>>

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

result img result-img The .style-a has higher priority so that the nested .style-b doesn t work. I simplify the css style to one-level nesting li style,actually it has multiple nested class in my project.

我曾尝试使用<代码>:不()来排除另一条,但似乎禁止内部的复合选择器。

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

I am now adding another class .important to improve the priority,and add important in nested one. But it can only support two-level nesting,and is really foolish.

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

Answer 1

页: 1 ∗∗∗∗∗

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

我最后指出,我的问题是如何实现既定主题。我发现,反应性倡议框架<代码>ant Designs nes主题符合我的需要。我本人也将实现同样的目标。

友情链接