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

Posted 2023-03-06

技术标签:

【中文标题】我可以编写一个 CSS 选择器来选择没有特定类或属性的元素吗？【英文标题】：Can I write a CSS selector selecting elements NOT having a certain class or attribute? 【发布时间】：2012-02-24 23:42:18 【问题描述】：

我想编写一个 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 中，不具有“可打印”类的元素将比具有“可打印”类的元素多得多（我意识到这是上面的例子中的其他方式）。

【问题讨论】：

【参考方案1】：

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

:not(.printable) 
    /* Styles */


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

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

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

【讨论】：

作为一点点信息，浏览器对 CSS 的媒体无关方面的支持在不同媒体类型中通常是相同的——如果浏览器不支持屏幕上的:not()，它就不会也支持印刷版。请注意，:not() 仅采用 简单选择器，这意味着它不能包含像 :not(div .printable) 这样的嵌套选择器 - 请参阅 W3C Selector syntax 我刚刚尝试了 .active a :not(.active a) 对我不起作用。但是，a:not(.active) 做到了！当你说它不适合你时，你可能是说它不适合适合你，对吧？这并不意味着它不起作用，这可能是一种特殊情况——:not(.active) 规则中的属性可能已被具有更高优先级的规则中的属性简单地覆盖。 @Kilves: Are you sure about that? :not() 的特异性在于它的论点，这意味着:not(div) 对div、:not(.cls) 到.cls 和:not(#id) 具有同样的特异性到#id。【参考方案2】：

我认为这应该可行：

:not(.printable)

来自"negative css selector" answer。

【讨论】：

【参考方案3】：

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

如果您关心 Internet Explorer 的兼容性，我建议您使用 http://selectivizr.com/。

但是记得在apache下运行，不然看不到效果。

【讨论】：

在apache下运行是什么意思？ selectivizr 是一个前端库，与服务器软件无关它执行 ajax 请求 - 没有 http 服务器就无法工作。【参考方案4】：

:not([class])

实际上，这将选择没有应用 css 类 (class="css-selector") 的任何内容。

我做了一个jsfiddle 演示

    h2 color:#fff
    :not([class]) color:red;background-color:blue
    .fake-class color:green

    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>

支持吗？ Yes : Caniuse.com (accessed 02 Jan 2020)：

支持率：98.74% 部分支持：0.1% 总计：98.84%

有趣的编辑，我在谷歌上搜索 :not 的反面。 CSS 否定？

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

【讨论】：

【参考方案5】：

`:not` 否定伪类

否定 CSS 伪类 :not(X) 是一个函数符号将一个简单的选择器 X 作为参数。它匹配一个元素不是由参数表示的。 X 不能包含另一个否定选择器。

您可以使用:not 排除匹配元素的任何子集，按照常规 CSS 选择器的顺序排列。

简单示例：按类排除

div:not(.class)

将选择所有 div 没有类 .class 的元素

div:not(.class) 
  color: red;

<div>Make me red!</div>
<div class="class">...but not me...</div>

复杂示例：按类型/层次排除

:not(div) > div

将选择不是另一个div 子级的所有div 元素

div 
  color: black

:not(div) > div 
  color: red;

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

复杂示例：链接伪选择器

除了无法链接/嵌套:not 选择器和伪元素这一显着例外，您可以与其他伪选择器结合使用。

div 
  color: black

:not(:nth-child(2))
  color: red;

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

Browser Support等

:not 是CSS3 level selector，主要支持的例外是它是IE9+

规范还提出了一个有趣的观点：

:not() 伪允许编写无用的选择器。为了实例:not(*|*)，它根本不代表任何元素，或者 foo:not(bar)，相当于foo，但更高特异性。

【讨论】：

这是一个有据可查且经过充分论证的晚餐！ #thumbsup 好的，您的示例 :not(div) > div 仅适用于直接父母。其他祖父呢？很棒的信息！正是我需要的！谢谢！【参考方案6】：

就像贡献一下：not() 的上述答案可以在角度形式中非常有效，而不是创建效果或调整视图/DOM，

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

确保在加载页面时，输入字段仅在添加了数据（即不再原始）但无效时才显示无效（红色边框或背景等）。

【讨论】：

【参考方案7】：

示例

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

// Opacity 0.6 all "section-" 但不是 "section-name"

【讨论】：

【参考方案8】：

正如其他人所说，您只需输入 :not(.class)。对于 CSS 选择器，我建议访问此链接，它在我的整个旅程中都非常有帮助： https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) 
  color: red;

否定伪类特别有用。假设我想选择所有 div，除了具有容器 id 的那个。上面的 sn-p 将完美地处理该任务。

或者，如果我想选择除段落标签之外的每个元素（不建议），我们可以这样做：

*:not(p) 
  color: green;

【讨论】：

【参考方案9】：

使用`:not()` 伪类：

用于选择除某个元素（或多个元素）之外的所有内容。我们可以使用:not() CSS 伪类。 :not() 伪类需要 CSS 选择器作为其参数。选择器会将样式应用于所有元素，但指定为参数的元素除外。

示例：

/* This query selects All div elements except for   */
div:not(.foo) 
  background-color: red;



/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) 
  background-color: red;



/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd))  
  color: red;

<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

我们已经看到了这个伪类的威力，它允许我们通过排除某些元素来方便地微调我们的选择器。此外，这个伪类增加了选择器的特异性。例如：

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) 
  color: red;


/* This selector is lower in the cascade but is overruled by the style above */
#foo 
  color: green;

<div id="foo">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

【讨论】：

【参考方案10】：

如果您希望特定类menu在缺少类登录时具有特定的CSS：

body:not(.logged-in) .menu  
    display: none

【讨论】：

以上是关于我可以编写一个 CSS 选择器来选择没有特定类或属性的元素吗？的主要内容，如果未能解决你的问题，请参考以下文章

调用 css id 选择器来改变另一个类

CSS3选择器根据firstchild选择父级

jquery使用css选择器来选取元素吗

css选择器选择包含img的表格单元格[重复]

如何使用jQuery选择没有特定类名的元素？

有没有办法在css中选择一个打开的选择框？

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

:not 否定伪类

简单示例：按类排除

复杂示例：按类型/层次排除

复杂示例：链接伪选择器

Browser Support等

使用:not() 伪类：

示例：

`:not` 否定伪类

使用`:not()` 伪类：