css – 如果选择器不是特定元素的子元素,那么如何定位选择器(因此只有当它是根时)

.toggle {
      color: red;
    }
    
    :not(.list) .toggle {
      font-weight:bold;
    }

<div class="container">
      <a href="#!" class="toggle">Toggle</a>
      <ul class="list">
        <li><a href="#!">Link 1</a></li>
        <li>
          <div class="container">
            <a href="#!" class="toggle">SubToggle</a>
            <ul class="list">
              <li><a href="#!">SubLink 1</a></li>
              <li>
                <a href="#!">SubLink 2</a>
              </li>
              <li><a href="#!">SubLink 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#!">Link 3</a></li>
      </ul>
    </div>

我认为使用：not()会导致仅将“粗体”应用于主“切换”链接,而是对所有红色应用“粗体”.为什么？

请注意,此代码嵌套了相同的类名,我不希望使用不同的css类来定位特定级别,我想仅使用后代选择器和其他运算符来定位元素

这里还有jsFiddle直接尝试.