css - 选择一个没有特定类的子元素的元素

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

No browser currently supports this

This would work, except no browser currently supports it as far as I am aware. jQuery does though, however.

div > div:not(:has(h1.Handle)) {
    cursor: move;
}

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

Try

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