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

Posted 2023-03-06

【中文标题】如何在 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>