Question

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

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

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

这是不正确的？它似乎不起作用！

Answer 1

：not（）是一个CSS否定伪类选择器。这是一个功能将简单选择器作为参数的伪类选择器然后匹配一个或多个未表示的元素参数。

更多信息logging和here。

您只能使用带有：not negation伪类选择器的简单选择器。

使用以下内容实现您的目标：

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

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

<强> here

CODE SNIPPET

＆＃13;

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

＆＃13;

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

＆＃13;

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

<强> jsFiddle

在四级选择器中，他们可能会解除此限制。它正在考虑之中。

Answer 2

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

否定伪类，不是（X），是一个功能符号   简单的选择器（不包括否定伪类本身）作为   论点。它表示一个未由其表示的元素   参数。

否定可能不会嵌套; ：not（：not（...））无效。另请注意   因为伪元素不是简单的选择器，所以它们不是   有效参数：not（）。

请参阅W3C's pseudo negation

这个CSS选择器是不正确的.my-class *：not（input [type =“text”]）

2 个答案: