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

一尘不染

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

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

阅读 441

2020-05-16

共1个答案

一尘不染

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

2020-05-16