Css 如何根据parents类选择不是特定父级的子级的元素？

例如，我想选择两个div，其中data role的内容不是data role=“page”div和class“modal”的子级。我不太精通高级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>

或

---

好吧，你可以用：

: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 */}

---

好吧，你可以用：

: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 */}

这将获取其

数据角色

为

页面

的所有元素，以及具有类

模式

的非元素，然后获取其

数据角色

为

内容

的所有直接子元素

现场演示

这将获取其

数据角色

为

页面

的所有元素，以及具有类

模式

的非元素，然后获取其

数据角色

为

内容

的所有直接子元素

---

现场演示。

这不是我真正想要的，但你确实给了我正确的想法，“[data role=“page”]：不是（.modal）>[data role=“content”]”这不是我真正想要的，但你确实给了我正确的想法，“[data role=“page”]：不是（.modal）>[data role=“content”]”谢谢。我刚刚在Kolink的评论中发布了这个。时间限制到了我会接受的。谢谢。我刚刚在Kolink的评论中发布了这个。时间限制到了，我会接受的。

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