选择不具有特定类的子元素的元素

Question

我的HTML结构是这样的

<div>
    <div>
        <h1>Something</h1>
    </div>
    <div>
        <h1 class='Handle'>Something</h1>
    </div>
</div>

如果

div > div

没有“Handle”类的子项，我希望

div > div

具有样式

cursor:move;

。我将如何在纯 CSS 中做到这一点，这可能吗？

Answer 1

:not(:has())

注意：对旧浏览器的支持有限。

下面的示例演示了

:not()

的组合 和

:has()

伪类来选择没有指定子类的元素。

div:not(:has(p)) {
  background: powderblue;
}
div:not(:has(p)):hover {
  color: blue;
  background: azure;
}

<div>
  <h1>Does Not Have a Paragraph</h1>
 </div>
<div>
  <h1>Has a Paragraph</h1>
  <p>Paragraph</p>
</div>

截至 2024 年 3 月，

:has()

受到大多数现代浏览器的支持。但是，Firefox 最近才在版本 121（日期为 2023 年 12 月 19 日）中实现了对

:has

的支持。因此，如果客户端使用旧浏览器，请谨慎使用。

:not()

自 2015 年以来已被大多数浏览器支持。

或者，jQuery 支持 :has()

选择器。

Answer 2

CSS中没有父选择器，所以你所要求的是不可能的。您可以做的是使用属性选择器将

cursor:move

 放在每个不具有“Handle”类的 h1 上。

h1:not([class=Handle]) {
    cursor:move;
} 

http://jsfiddle.net/4HLGF/

另一个选项是调整 HTML，并将 h1 移动到与 div 相同的水平。

<div>
    <h1>Something</h1>
    <div>
        dragable content
    </div>
    <h1 class='Handle'>Something</h1>
    <div>
        non dragable content
    </div>
</div>

现在您可以对 h1 进行相同的检查，并定位其后面的 div。

h1:not([class=Handle]) + div {
    cursor:move;
}

http://jsfiddle.net/4HLGF/2/

Answer 3

尝试

div > div h1:not([class=Handle]) {
    cursor:move;
}