我不明白为什么以下代码没有所需的行为：
.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直接尝试.
解决方法
我想你可能想要这个：
.toggle {
color: red;
font-weight: bold;
}
div *:not(.list) .toggle {
font-weight: normal;
}
