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

问题描述

在下面检查此代码:

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

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

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?

推荐答案

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

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