css - How to target a selector only if it's NOT child of a specific element (so only if it's the root)

Question

我不明白为什么以下代码没有预期的行为:

    .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直接试试。

Answer 1

我想你可能想要这个:

.toggle {
  color: red;
  font-weight: bold;
}

div *:not(.list) .toggle {
  font-weight: normal;
}