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

我想编写一个选择器,选择所有没有“可打印”类的元素,在本例中,这些元素是nav和a元素。

这可能吗?

注意:在我想要使用的实际HTML中,没有“可打印”类的元素将比没有“可”类的多得多(我意识到在上面的示例中是相反的)。


当前回答

您可以使用前面提到的:not(.class)选择器。

如果您关心Internet explorer兼容性,我建议您使用http://selectivizr.com/.

但请记住在apache下运行它,否则您将看不到效果。

其他回答

实例

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

//不透明度0.6所有“section-”,但不包括“section name”

如果您希望特定的类菜单在缺少类登录时具有特定的CSS:

body:not(.logged-in) .menu  {
    display: none
}
:not([class])

实际上,这将选择任何没有应用css类(class=“css selector”)的对象。

我做了一个jsfiddle演示

h2{颜色:#fff}:not([class]){color:红色;背景色:蓝色}.fake类{color:绿色}<h2 class=“fake class”>fake class将为绿色</h2><h2 class=“”>空类应为白色</h2><h2>没有班级应该是红色的</h2><h2 class=“fake-class2s”>fake-cass2应为白色</h2><h2 class=“”>空class2应为白色</h2><h2>类别2不应为红色</h2>

是否支持?是:Canouse.com(2020年1月2日访问):

支持率:98.74%部分支撑:0.1%总计:98.84%

有趣的编辑,我在谷歌上搜索的是相反的:不是。CSS否定?

selector[class]  /* the oposite of :not[]*/

我认为这应该奏效:

:not(.printable)

从“负css选择器”回答。

就像要强调:not()的上述答案在角度形式上非常有效,而不是创建效果或调整视图/DOM一样,

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

确保在加载页面时,如果添加了数据(即不再原始)但无效,则输入字段将仅显示无效(红色边框或背景等)。