:not() pseudo-class 是否支持父元素？

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

In CSS, can you target an element, then exclude instances of it based on parent wrapper elements higher up the DOM?

不，不是您尝试的方式：

li:not(.wrap li)

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

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' class-名字的祖先：

: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>

:not() pseudo-class 是否支持父元素？

Does the :not() pseudo-class support parent elements?

html

css

css-selectors