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

Question

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

没有以

的方式接受黑客攻击

.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元素。

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;