css - 如何根据父类选择不是特定父类的子元素？

Question

例如，我想选择两个 div，其内容的数据角色不是“modal”类的 data-role="page" div 的子项。我并不精通高级 CSS 选择器。

<div>
    <div data-role="page">
        <div data-role="content"></div>
    </div>
    <div data-role="page" class="modal">
        <div data-role="content"></div>
    </div>
    <div data-role="page">
        <div data-role="content"></div>
    </div>
</div>

我已经尝试了一些东西，但我无法得到任何工作......例如

[data-role="content"]:not([data-role="page"].modal > :after)

或者

[data-role="content"]:not([data-role="page"].modal > [data-role="content"])

Answer 1

[data-role="page"]:not(.modal) > [data-role="content"]

这将获取所有data-roleispage 和who 不具有类的元素modal，然后获取它们的所有直接子data-role元素content。

现场演示在这里。

Answer 2

好吧，你可以这样做：

:not([data-role=page])>[data-role=content] {...}

但是为了更好的兼容性，您可能想看看是否可以这样做：

[data-role=content] {/* define some styles */}
[data-role=page]>[data-role=content] {/* cancel out the previously-defined styles */}