:not() 伪类是否支持父元素？

Question

在 CSS 中，您能否定位一个元素，然后根据 DOM 更高层的父包装元素排除它的实例？

例如：

HTML

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>

CSS

li {
    color:red;
}
li:not(.wrap li) {
    colour:blue;
}

所以在这种情况下，我想根据它们的父包装器排除第一系列的<li> 标签。这可以通过 CSS 实现吗？ （我的意思不是只定位 .wrap li 并在那里应用所需的样式，因为在我的情况下，我必须排除）

Answer 1

在 CSS 中，您能否定位一个元素，然后根据 DOM 更高层的父包装元素排除它的实例？

不，不是您尝试的方式：

li:not(.wrap li)

不过，您可以改用一种更简单的方法来设置所有 <li> 元素的样式，然后使用 wrap 类名专门设置祖先的后代元素：

li {
    /* generic styles for <li> elements */
}
.wrap li {
    /* specific styles for <li> elements that are
       descendants of elements with a class of '.wrap' */
}

li {
  color: blue;
}
.wrap li {
  color: red;  
}

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>

---

请注意，由于其脆弱性，以下内容已从答案的上述部分中删除 - 必须转义选择器中的句点，并且它可能会被 any 意外覆盖具有'wrap' 类名的祖先：

:not(\.wrap) li

li {
  color: red;
}
div:not(\.wrap) li {
  color: blue;  
}

<div class="wrap">
    <ul>
         <li>link</li>
         <li>link</li>
         <li>link</li>
    </ul>
</div>
<ul>
     <li>link</li>
     <li>link</li>
     <li>link</li>
</ul>