具有CSS的多个子代子选择器[重复]

  • Z时代
  • 2024-01-10
  • 分类：问答

检查以下代码：

.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字变为红色，但无论如何它都会变为红色。我究竟做错了什么？

回答：

在not(.bbb)将匹配没有任何类股利.bbb，你有很多他们之间.aaa和.ccc那为什么文本是红色的。要执行您想要的操作，您需要考虑两个选择器

.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的多个子代子选择器[重复] 的全部内容， 来源链接： utcz.com/qa/411811.html

回到顶部