Question

例如，我想选择具有数据角色的两个div，这些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-role为page 的所有元素不的所有元素都具有类modal，然后获取所有元素他们的直系孩子data-role是content。

现场演示here。

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

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

2 个答案: