我可以编写一个CSS选择器来选择不具有某个类或属性的元素吗？

最新推荐文章于 2024-07-16 16:27:38 发布

p15097962069

最新推荐文章于 2024-07-16 16:27:38 发布

阅读量2.3k

点赞数

文章标签： html css css-selectors

原文链接：https://oldbug.net/q/cE0K/Can-I-write-a-CSS-selector-selecting-elements-NOT-having-a-certain-class-or-attribute

版权

本文介绍了如何使用CSS否定伪类`:not()`来选择那些不具有特定类或属性的元素。通过`:not(.class)`或`:not([attribute])`，可以排除具有指定类或属性的元素。文章还提供了不同复杂程度的示例，并讨论了浏览器支持情况，特别提到了在Angular表单中的应用。

摘要由CSDN通过智能技术生成

本文翻译自：Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. 我想编写一个CSS选择器规则，选择所有没有特定类的元素。 For example, given the following HTML: 例如，给定以下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>

I would like to write a selector that selects all elements that don't have the "printable" class which, in this case, are the nav and a elements. 我想编写一个选择器来选择所有没有“可打印”类的元素，在这种情况下，它是nav和元素。

Is this possible? 这可能吗？

NOTE: in the actual HTML where I would like to use this, there are going to be a lot more elements that don't have the "printable" class than do (I realize it's the other way around in the above example). 注意：在我想要使用它的实际HTML中，将会有更多的元素没有 “可打印”类而不是（我在上面的例子中意识到它是另一种方式）。

#1楼

参考：https://stackoom.com/question/cE0K/我可以编写一个CSS选择器来选择不具有某个类或属性的元素吗

#2楼

You can use :not(.class) selector as mentioned before. 您可以使用:not(.class)选择器，如前所述。

If you care about Internet explorer compatibility I recommend you to use http://selectivizr.com/ . 如果您关心Internet Explorer兼容性，我建议您使用http://selectivizr.com/ 。

But remember to run it under apache otherwise you won't see the effect. 但是记得在apache下运行它，否则你将看不到效果。

#3楼

:not([class])

Actually, this will select anything that does not have a css class ( class="css-selector" ) applied to it. 实际上，这将选择任何没有应用css类（ class="css-selector" ）的东西。

I made a jsfiddle demo 我做了一个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>

Is this supported? 这支持吗？ Yes : Caniuse.com (accessed 25 Aug 2014) : 是：Caniuse.com（2014年8月25日访问）：

Support: 88.85% 支持率：88.85％
Partial support: 4.36% 部分支持：4.36％
Total:93.21% 总计：93.21％

Funny edit, I was Googling for the opposite of :not. 有趣的编辑，我是谷歌搜索相反：不。 CSS negation? CSS否定？

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

#4楼

The `:not` negation pseudo class `:not`否定伪类

The negation CSS pseudo-class, :not(X) , is a functional notation taking a simple selector X as an argument. 否定CSS伪类， :not(X) ，是一个以简单的选择器X作为参数的功能表示法。 It matches an element that is not represented by the argument. 它匹配一个未由参数表示的元素。 X must not contain another negation selector. X不得包含另一个否定选择器。

You can use :not to exclude any subset of matched elements, ordered as you would normal CSS selectors. 您可以使用:not排除匹配元素的任何子集，按照普通CSS选择器的顺序排序。

Simple example: excluding by class 简单示例：按类排除

div:not(.class)

Would select all div elements without the class .class 将选择没有类.class所有div元素

 div:not(.class) { color: red; }

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

Complex example: excluding by type / hierarchy 复杂示例：按类型/层次结构排除

:not(div) > div

Would select all div elements which arent children of another div 将选择所有div元素不是另一个div子元素

 div { color: black } :not(div) > div { color: red; }

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

Complex example: chaining pseudo selectors 复杂的例子：链接伪选择器

With the notable exception of not being able to chain/nest :not selectors and pseudo elements, you can use in conjunction with other pseudo selectors. 除了无法链/嵌套之外的明显例外:not选择器和伪元素，您可以与其他伪选择器一起使用。

 div { color: black } :not(:nth-child(2)){ color: red; }

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

Browser Support , etc. 浏览器支持等

:not is a CSS3 level selector , the main exception in terms of support is that it is IE9+ :not CSS3级别的选择器 ，支持方面的主要例外是它是IE9 +

The spec also makes an interesting point: 该规范也提出了一个有趣的观点：

the :not() pseudo allows useless selectors to be written. :not()伪允许写入无用的选择器。 For instance :not(*|*) , which represents no element at all, or foo:not(bar) , which is equivalent to foo but with a higher specificity. 例如:not(*|*) ，它根本不代表任何元素，或者foo:not(bar) ，它相当于foo但具有更高的特异性。

#5楼

Just like to contribute that the above answers of :not() can be very effective in angular forms, rather than creating effects or adjusting the view/DOM, 就像贡献一样，上面的答案：not（）在角形式中非常有效，而不是创建效果或调整视图/ DOM，

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

Ensures that on loading your page, the input fields will only show the invalid (red borders or backgrounds, etc) if they have data added (ie no longer pristine) but are invalid. 确保在加载页面时，输入字段仅显示无效（红色边框或背景等），如果它们已添加数据（即不再是原始数据）但无效。

#6楼

Example 例

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

// Opacity 0.6 all "section-" but not "section-name" //不透明度0.6所有“部分 - ”但不是“部分名称”

p15097962069

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我可以编写一个CSS选择器来选择不具有某个类或属性的元素吗？

I would like to write a CSS selector rule that selects all elements that don't have a certain class
复制链接

扫一扫