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



我想在类为"my class"的DOM元素内选择所有元素,除了类型为text的输入。

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

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

这不正确吗?它似乎不起作用!

:not((是一个CSS否定伪类选择器。这是一个功能伪类选择器,以简单选择器作为参数,以及则匹配未由论点

更多信息请点击此处。


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

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

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

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


jsFiddle


代码SNIPET:

.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>


您可能会问,为什么它只接受简单的选择器,这是一个性能问题。

快速与完整选择器配置文件

在第四级选择器中,他们可能会取消这一限制。它正在考虑之中。

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

否定伪类:not(X(是采用简单选择器(不包括否定伪类本身(作为论点它表示的元素不是由论点

否定不能嵌套not(:not(…((无效。另请注意由于伪元素不是简单的选择器,因此它们不是:not((的有效参数。

请参阅W3C的伪否定

最新更新