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

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 2

此将起作用，但据我所知，目前没有浏览器支持它。 jQuery确实可以。

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

Answer 3

尝试

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

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

3 个答案: