文章/答案/技术大牛

发布

社区首页 >问答首页 >在嵌套较少的地方使用:not()

问在嵌套较少的地方使用:not()
EN

Stack Overflow用户

提问于 2016-05-04 08:02:56

回答 2查看 78关注 0票数 1

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

这是我试过的更少，但它不起作用。

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

less

css

reference

nested

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-05-04 08:06:22

是的，您可以在结束时追加& (父选择器)，而不是在开始时使用它。

.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) &那样编写。

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

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

票数 3

Stack Overflow用户

发布于 2016-05-04 08:07:54

所以，只要把规则应用于身体：

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37021863

复制

相似问题

问在嵌套较少的地方使用:not()
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在嵌套较少的地方使用:not()EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在嵌套较少的地方使用:not()
EN