我可以编写一个 CSS 选择器来选择没有特定类或属性的元素吗？

小编典典

我可以编写一个 CSS 选择器来选择没有特定类或属性的元素吗？

all

我想编写一个 CSS 选择器规则来选择所有没有特定类的元素。例如，给定以下 HTML：

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

我想编写一个选择器来选择所有没有“可打印”类的元素，在这种情况下，是导航和 a 元素。

这可能吗？

注意：在我想使用它的实际 HTML 中，没有 “可打印”类的元素会多得多（我意识到在上面的示例中情况正好相反）。

阅读 113

2022-03-02

共1个答案

小编典典

通常，您将类选择器添加到:not()伪类，如下所示：

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

但是，如果您需要更好的浏览器支持（IE8 和更早版本不支持:not()），您最好为具有“可打印”类的元素创建样式规则
。如果尽管您对实际标记说了些什么，这仍然不可行，那么您可能必须围绕该限制来处理您的标记。

请记住，根据您在此规则中设置的属性，其中一些可能会被的后代继承，
.printable或者以其他方式影响它们。例如，虽然display不是继承的，但设置display: nonea:not(.printable)将阻止它及其所有后代显示，因为它会从布局中完全删除元素及其子树。您通常可以通过使用visibility: hidden来解决此问题，这将允许显示可见的后代，但隐藏的元素仍会像最初一样影响布局。简而言之，请小心。

2022-03-02