如何正确使用:not selector来解决.b而不是.a .b？

Question

我想定义适用.b但不适用的css.a .b

没有黑客接受的方式

.a .b {
   background-color: cornflowerblue;
}

此外,html可以在任意容器中.body > .b也不适用于我的案子

我想使用:not选择器或替代解决方案,这不会让我改变定义.a .b

div {
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 10px;
  border: 1px solid salmon;
}

.b {
  background-color: green;
}

<div class="a">
  <div class="b"></div>
</div>

<div class="b"></div>

请看这里的codepen

https://codepen.io/anon/pen/OxOLZE

Answer 1

这将选择所有.b不属于子元素的元素.a.

div {
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  margin: 10px;
  border: 1px solid salmon;
}

*:not(.a) > .b {
  background-color: green;
}

<div class="a">
  <div class="b"></div>
</div>

<div class="b"></div>