CSS选择器：not（）在选择子项时不起作用

Question

我不明白为什么：not（）选择器表现得像这样...... 我正在尝试的是选择一个没有孩子作为另一个班级的班级，但是，我正面临一个我不明白的问题：

.a :not(.b){ color: red;}
.b{ color: green;}

<div class='a'>
dasdsa
  <div class='b'>
  dsadas
    <div class='a'>
      dsadasdas
       <div class='b'>
        dsadadasd
      </div>
    </div>
  </div>

</div>

https://jsfiddle.net/dg4f4agh/1/

当我使用“＆gt;”时操作员它的表现如我所想......

.a>:not(.b){ color: red;}
.b{ color: green;}

<div class='a'>
dasdsa
  <div class='b'>
  dsadas
    <div class='a'>
      dsadasdas
       <div class='b'>
        dsadadasd
      </div>
    </div>
  </div>

</div>

https://jsfiddle.net/dg4f4agh/2/

有人可以解释为什么第一个例子不起作用，以及我如何做我想做的事情？