CSS选择器：＆＃34;只有在没有父Y和＃34的情况下才选择X.

Question

我希望.c为红色＆amp;只有在没有父母.b（直接或间接）的情况下才能加粗：

＆＃13;

＆＃13;

.a :not(.b) .c {
  color: red;
  font-weight: bold;
}

＆＃13;

<div class="a">
  <div class="not-b">
    <div class="c">bold red</div>
    <div class="b">
      <div class="c">normal black</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

一种解决方案是将CSS定义拆分。首先假设如果.a在.c某个点跟随.b，则文本将始终为红色，然后指定如果.a .c { color: red; background-color: gray; display: inline-block; padding: 2em; animation-name: spin; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .a .b .c { all: unset; }在任何时候都阻碍了，请取消设置。< / p>

＆＃13;

＆＃13;

<div class="a">
  <div class="g">
    <div class="c">i should be red and spinning</div>
  </div>
</div>

<div class="a">
  <div class="c">i should be red and spinning</div>
</div>

<div class="a">
  <div class="g">
    <div class="f">
      <div class="c">i should be red and spinning</div>
    </div>
  </div>
</div>

<div class="a">
  <div class="b">
    <div class="c">i should not be red or spinning</div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="b">
      <div class="f">
        <div class="c">i should not be red or spinning</div>
      </div>
    </div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="d">
      <div class="b">
        <div class="f">
          <div class="e">
            <div class="c">i should not be red or spinning</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

all

＆＃13;

＆＃13;

＆＃13;

注意：all在IE中不起作用。此外，旋转动画取自here - 我只是将其用于演示card如何覆盖包括任何动画在内的所有动画。

Answer 2

此处没有单个选择器就足够了。

您只需将.a > .c添加到选择器

即可

.a *:not(.b) .c,
.a > .c {
  color: red;
}

<div class="a">
  <div class="g">
    <div class="c">i should be red</div>
  </div>
</div>

<div class="a">
  <div class="c">i should be red</div>
</div>

Answer 3

  

我希望.c只有在.a和.c或之间没有父.b时才是红色的   如果.a和.c之间没有父母。

此声明在逻辑上可以简化为：

  

我希望.c只有在是.a

的孩子而不是后代时才是红色的

在这种情况下，

.a > .c { color: red; }

Answer 4

首先，我认为你应该默认为红色， c 类。然后执行以下操作：

<强> CSS

.a .c {
    color: red
}

.a .not-red .c {
    color: blue;
}

<强> HTML

<div class="a">
    <div class="b not-red">
        <div class="c">
            test
        </div>
    </div>
</div>

我已经测试过，它可以随心所欲地工作。

Answer 5

您需要为每个级别的嵌套选择一个规则。没有可能为任何级别

设置通用解决方案

另一方面，你不应该有一个具有如此多嵌套级别的DOM，你不能用6个选择器处理它....

.a > .c,
.a > *:not(.b) > .c, 
.a > *:not(.b) > *:not(.b) > .c, 
.a > *:not(.b) > *:not(.b) > *:not(.b) >.c {
  background-color: red;
}

<div class="a">
  <div class="g">
    <div class="c">i should be red</div>
  </div>
</div>

<div class="a">
  <div class="c">i should be red</div>
</div>

<div class="a">
  <div class="g">
    <div class="f">
      <div class="c">i should be red</div>
    </div>
  </div>
</div>

<div class="a">
  <div class="b">
    <div class="c">i should not be red</div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="b">
      <div class="f">
        <div class="c">i should not be red</div>
      </div>
    </div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="d">
      <div class="b">
        <div class="f">
          <div class="e">
            <div class="c">i should not be red</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>