带有css的多个后代子选择器 [英] Multiple descendant children selector with css

问题描述

检查以下代码:

.aaa :not(.bbb) .ccc {字体大小:20px；颜色:#FF0000；}

<div class="aaa">
<div 类="bbb">
<div class="ccc">AQUI</div></div></div></div></div></div></div>

我想匹配所有 .aaa 的子元素但不是 .bbb 的子元素的 .ccc 元素.这意味着上面的代码不应该使 AQUI 字为 RED，但无论如何它都会变成 RED.我做错了什么?

解决方案

not(.bbb) 将匹配任何没有类 .bbb 的 div 并且你有一个.aaa 和 .ccc 之间有很多，这就是为什么文本是红色的.要执行您想要的操作，您需要考虑两个选择器

.aaa .ccc {字体大小:20px；颜色:#FF0000；}/*如果.bbb的孩子我们重置样式*/.bbb .ccc {颜色:初始；字体大小:初始；}

<div class="aaa">
<div 类="bbb">
<div class="ccc">AQUI</div></div></div></div></div></div></div>

Check this code below:

.aaa :not(.bbb) .ccc {
  font-size: 20px;
  color: #FF0000;
}

<div class="aaa">
    <div>
        <div>
            <div class="bbb">
                <div>
                    <div>
                        <div class="ccc">AQUI</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I want to match all .ccc element that are children of .aaa but are not children of .bbb. It means that the code above should NOT make the AQUI word be RED, but it gets RED anyway. What am I doing wrong?

解决方案

The not(.bbb) will match any div without the class .bbb and you have a lot of them between .aaa and .ccc that why the text is red. To do what you want you need to consider two selectors

.aaa .ccc {
  font-size: 20px;
  color: #FF0000;
}
/*we reset the style if children of .bbb*/
.bbb .ccc {
  color: initial;
  font-size:initial;
}

<div class="aaa">

  <div>

    <div>

      <div class="bbb">

        <div>

          <div>

            <div class="ccc">AQUI</div>

          </div>

        </div>
      </div>

    </div>

  </div>

</div>

这篇关于带有css的多个后代子选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！