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

一尘不染

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

html

我想编写一个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>

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

这可能吗？

注意：在实际的HTML中，我想使用它的地方将比不包含“可打印的”类的元素多得多（在上面的示例中，我发现这是另一种方式）。

阅读 270

2020-05-10

共1个答案

一尘不染

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

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

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

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

请的是，根据属性你在这个规则的设定，其中一些既可以由后代继承的头脑是
.printable，或以其他方式影响他们的这种或那种方式。例如，尽管display未继承，但display: none在上设置:not(.printable)会阻止它及其所有后代显示，因为它会从布局中完全删除元素及其子树。您通常可以通过使用visibility: hidden替代方法来解决此问题，该方法将允许显示可见的后代，但隐藏的元素仍然会像最初那样影响布局。简而言之，请小心。

2020-05-10