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

Posted 2023-03-06

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

【英文标题】：Is this CSS selector incorrect .my-class *:not(input[type="text"])这个 CSS 选择器是否不正确 .my-class *:not(input[type="text"])

【发布时间】：2016-12-12 04:54:14

【问题描述】：

我想在类“my-class”的 DOM 元素中选择 除了文本类型输入之外的所有元素。

所以，我有这样的 CSS 选择器

.my-class *:not(input[type="text"]) 
    // Some CSS poperties here

这是不正确的吗？好像不行！

【问题讨论】：

jsfiddle.net/gpzfcn7c - 你的选择器似乎工作得很好。

@Robert C：你是否有机会在 Safari 中进行测试？

@RobertC：它不在 Chrome 中

@BoltClock - 是的，我假设 OP 在尝试实现它之前就知道not() 的浏览器限制。

@Robert C：呵呵……我想大多数人都不知道。

【参考方案1】：

:not() 是一个 CSS 否定伪类选择器。它是一个功能 将 simple 选择器 作为参数的伪类选择器，以及 然后匹配一个或多个不由 论据。

更多信息here 和 here。

---

您只能将简单的选择器与 :not 否定伪类选择器一起使用。

使用以下方法来实现您想要的：

.my-class :not([type='text']) 
   //CSS properties here

由于没有其他 html 元素使用属性 [type="text"]，您可能会丢失输入选择器，然后您将使用属性简单选择器进行设置。此外，您不需要使用 * 作为选择器，它已经匹配每个元素。

---

jsFiddle

---

代码片段：

.my-class :not([type='text'])::after 
  content: "selected";
  border: 1px solid red;

<div class="my-class">
  <input type="text">
  <input type="checkbox">
  <input type="radio">
  <div class="element">Div</div>
  <section>Section</section>
  <h1>H1</h1>
</div>

---

你可能会问为什么它只接受简单的选择器，这是性能问题。

Fast vs Complete Selector Profiles

有可能在四级选择器中他们解除了这个限制。正在考虑中。

【讨论】：

:not() 最初只接受简单选择器的真正原因是因为他们根本没有预料到它会与复合或复杂选择器一起使用。性能问题仅在他们开始考虑延期时才出现，即便如此，这些也是完全没有根据的——至少一年前取消了限制。 WD 已经过时了，我不知道他们什么时候会更新它。

【参考方案2】：

.my-class input:not([type=text]), .my-class *:not(input)

否定伪类:not(X) 是一个函数记号 简单的选择器（不包括否定伪类本身）作为 争论。它代表一个元素，它没有被它的代表 论据。

否定不能嵌套； :not(:not(...)) 无效。另请注意 因为伪元素不是简单的选择器，所以它们不是 :not() 的有效参数。

见W3C's pseudo negation

【讨论】：

我认为您引用了错误的文字。问题中既没有嵌套的 :not() 伪元素也没有伪元素。