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

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;
}