html – 我可以写一个CSS选择器选择元素不具有某个类吗?

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

我想写一个选择器,选择没有“printable”类的所有元素,在这种情况下,是nav和一个元素。

这可能吗?

注意:在实际的HTML中,我想使用这个,将会有更多的元素没有“可打印”类比。(我意识到在上面的例子中的其他方式)。

最佳答案
通常,将类选择器添加到:not()伪类中,如下所示:

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

但是如果你需要更好的浏览器支持(IE8和旧版不支持:not()),你可能更好的为那些有“可打印”类的元素创建样式规则。如果即使这是不可行的,尽管你对你的实际标记说,你可能需要解决这个限制。

请记住,根据您在此规则中设置的属性,其中一些可能由.printable的后代继承,或以其他方式影响它们。例如,虽然显示不是继承的,但在a:not(.printable)上设置display:none将阻止它及其所有后代显示,因为它会完全删除元素及其子树。你经常可以通过使用visibility:hidden来允许可见的后代显示,但隐藏的元素仍然会影响布局,因为他们原来做的。总之,只要小心。

转载注明原文:html – 我可以写一个CSS选择器选择元素不具有某个类吗? - 代码日志