html - CSS - 在 :not 中使用选择器

Question

.formSec .formWrap input[type="text"]:not(.counter input[type="text"]):not(other){
   width:80%;
   text-align:left;
}

我尝试使用 :not 使 formWrap 类中的所有输入框都为 80%，但 .counter 类中包含的输入框除外。

我必须将计数器类保留在父 div 中，它不能应用于输入框，而且我也不想将类应用于排除的输入框，这可能吗？

<div class="formSec">
<div class="formWrap counter">
<input type="text" size="4" maxlength="4" />
</div>
<div class="formWrap">
<input class="other" type="text" size="4" maxlength="4" />
</div>
<div class="formWrap">
<input type="text" size="4" maxlength="4" />
</div>
</div>
</div>

这是我需要保留的 HTML，因此只有第二个输入才是 80%。

Answer 1

CSS :not() negation pseudo-class只接受simple selector作为参数，它不应包含另一个 :not()伪类或任何伪元素。还有 Combinators 是不允许的。这意味着.counter input[type="text"]不是一个有效的论点。

Spec来自 CSS Selectors level 3 :

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

您可以选择.formWrap没有 .counter 的元素类(class) .formWrap:not(.counter)然后定位嵌套的 <input>不包括 .other 的元素类(class) input[type="text"]:not(.other)如下:

<强> Example Here

.formSec .formWrap:not(.counter) input[type="text"]:not(.other) { /*
                  ^----     No spaces here     ----^              */
   width:80%;
   text-align:left;
}

(检查 revisions 中是否有基于旧标记的旧答案)