Question

在深层嵌套容器中，我想检查body是否没有给定的类，并对该元素应用一些样式。

这是我尝试使用Less但它不起作用。

.node1{ 
  .node2{
    &-index-1{}
    &-index-2 {
       &:not(body.some-class){
          //apply changes on &-index-2
       }
    }
  }
}

Answer 1

是的，您可以在最后添加&（父选择器），而不是在开头使用它。

.node1{ 
  .node2{
    &-index-1{
        color: blue;
    }
    &-index-2 {
       body:not(.some-class) &{ // reason for change of :not() is explained below.
          color: red;
       }
    }
  }
}

需要注意的一点是，CSS :not()选择器目前不接受复杂的选择器。它只接受简单的选择器，因此选择器应该写成body:not(.some-class) &。

＆＃13;

.node1 .node2-index-1 {
  color: blue;
}
body:not(.some-class) .node1 .node2-index-2 {
  color: red;
}

＆＃13;

<body>
  <div class='node1'>
    <div class='node2-index-1'>
      Index 1
    </div>
    <div class='node2-index-2'>
      Index 2
    </div>
  </div>
</body>

＆＃13;

Answer 2

所以只需将规则应用于正文：

body{
    .node1{ 
        .node2{
            &-index-1{}
        }
    }

    &:not(.some-class) {
        .node1{ 
            .node2{
                &-index-1{}
                &-index-2 {
                  //apply changes on &-index-2
                }
            }
        }
    }
}

在较少深度嵌套中使用：not（）

2 个答案: