如何在 CSS 中正确使用 not 选择器 [重复]

Posted

技术标签:

【中文标题】如何在 CSS 中正确使用 not 选择器 [重复]【英文标题】:How to use the not selector correctly in CSS [duplicate] 【发布时间】:2015-12-16 04:18:42 【问题描述】:

我了解在 CSS 中使用 :not() 的基本要点,但它似乎对我不起作用。我正在尝试做类似的事情:

input[type=text][readonly]:not(.class1, .class2) 
background-color: #DDDDDD;
color: #1E1E1E;

但这似乎对我不起作用。每当我阅读有关此的任何信息时,它都会有input:not(.class1, .class2) 之类的示例,但标签和:not() 部分之间没有任何内容。假设我写的语法不正确,我是否正确?如果我使用:not(),我可以不再定义标签元素吗?

【问题讨论】:

来自克里斯的东西:css-tricks.com/almanac/selectors/n/not 我之前看过了,好像没有我要找的信息,还是我错了? 【参考方案1】:

您唯一的问题是您在 :not() 中传递了两个选择器,每个语句只使用一个。

目前扩展参数 (foo, bar) 不被任何浏览器支持。

使用

:not(.class1):not(.class2)

https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot

input[type=text][readonly]:not(.class1):not(.class2) 
  background-color: #DDDDDD;
  color: #1E1E1E;
<input type=text readonly class="class1">
<input type=text readonly>
<input type=text readonly class="class2">

【讨论】:

谢谢!我会试试 :) 我还听说:not() 在 IE 中不起作用,这是真的吗? @user3334871 仅来自版本 9 是指低于版本 9 还是高于版本?不幸的是,我的申请必须支持 IE9 一年左右。 @user3334871 IE9 会对以上内容感到满意。您可以随时进行测试。【参考方案2】:

:not 只接受简单的选择器,而不接受它们的列表。

所以你的选择器应该是这样的:

input[type=text][readonly]:not(.class1):not(.class2) ...

【讨论】:

【参考方案3】:

结合使用:

:not(.class1):not(.class2)

:not 选择器不是函数。就像任何其他选择器接受其他选择器一样。

你的最终 CSS 应该是:

input[type=text][readonly]:not(.class1):not(.class2) 
  /* Styles */

片段

input[type=text][readonly]:not(.class1):not(.class2) 
  background-color: #DDDDDD;
  color: #1E1E1E;
<input type=text readonly class="class1">
<input type=text readonly class="class2">
<input type=text readonly>

【讨论】:

以上是关于如何在 CSS 中正确使用 not 选择器 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在c#中使用带有“not”的css选择器?

Scrapy:: 如何在 CSS 选择器中使用“not”来跳过元素

:CSS中的NOT选择器在我的情况下不起作用[重复]

这个 CSS 选择器是不是不正确 .my-class *:not(input[type="text"])

CSS属性选择器角色* =用户[重复]

在 IE 8 中加速 ":not" jQuery CSS 选择器?