使用和不使用：not（）选择器执行CSS规则

Question

我的Sass / CSS有一个非常奇怪的问题。我有一个使用和不使用：not（）选择器执行的规则，但我认为它不应该应用于：not（）。

这运行：

.background-color-white {
    .breadcrumbs-primer {
        position: relative;
        z-index: 1;
        li, a, li:after, li a:after {
            color: $color-white;
        }
    }
} 

但是这样做：

:not(.background-color-white) {
    .breadcrumbs-primer {
        position: relative;
        z-index: 1;
        li, a, li:after, li a:after {
            color: $color-white;
        }
    }
} 

和.breadcrumbs-primer嵌套在我的HTML中的.background-color-white内，您可以在此处看到：

<div class="background-color-white">
   <!-- breadcrumbs -->
   <div class="breadcrumbs-primer padding-top-small">
      <div class="row">
         <div class="small-12 columns">
            <ul class="breadcrumbs">
               <li><a href="#">Home</a></li>
               <li class="disabled">Lorem ipsum dolar</li>
            </ul>
         </div>
      </div>
   </div>
   <!-- end breadcrumbs -->
</div>