代码之家  ›  专栏  ›  技术社区  ›  Urbycoz

如何设置一个样式,但不包括类和它们的孩子?

  •  0
  • Urbycoz  · 技术社区  · 7 年前

    在我的页面上有一个div的样式。我想创建一些less来排除特定类的div,以及他们所有的孩子。

    这是我的(简化的)html:

    <div class='people'>
        <div>
            <!--This text should be green-->
            Bob
        </div>
        <div>
            <!--This text should be green-->
            Geoff
        </div>
        <div class="ex-members">
            <div>
                <!--This text should remain red--> 
                Mary
            </div>
            <div>
                <!--This text should remain red--> 
                Fred
            </div>
        </div>
    </div>
    

    我尽量少用:

    body {
       color:red;
    }
    .people {
       &:not(.ex-members) {
          color:green;
       }
    }
    

    但这似乎让所有的名字都变成了绿色。

    注意:我当然可以通过覆盖绿色并将前成员重新设置为黑色来解决这个问题,但如果可能的话,我想避免这样做。

    2 回复  |  直到 7 年前
        1
  •  1
  •   Paulie_D    7 年前

    可以使用直系后代选择器 >

    .people {
       > :not(.ex-members){
          color:green;
       }
    }
    

    它编译成…

    body {
      color: red;
    }
    
    .people> :not(.ex-members) {
      color: green;
    }
    <div class='people'>
      <div>
        <!--This text should be green-->
        Bob
      </div>
      <div>
        <!--This text should be green-->
        Geoff
      </div>
      <div class="ex-members">
        <div>
          <!--This text should remain red-->
          Mary
        </div>
        <div>
          <!--This text should remain red-->
          Fred
        </div>
      </div>
    </div>
        2
  •  0
  •   Joseph Webber    7 年前

    你的 ex-members div在你的 people 你的第二种风格是寻找 班级与否 前成员 给他们上课。简单的解决方法是移除 &:not .

    .ex-members {
      color:green;
    }