Question

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

我试图使用：不是这样，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"]不是有效的参数。

来自CSS Spec的

Selectors level 3：

一个简单的选择器是一个类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

您可以选择.formWrap .counter个.formWrap:not(.counter)分组的<input>元素，然后定位嵌套的.other元素，不包括input[type="text"]:not(.other)的元素按.formSec .formWrap:not(.counter) input[type="text"]:not(.other) { /* ^---- No spaces here ----^ */ width:80%; text-align:left; }分类如下：

<强> Example Here

{{1}}

（检查revisions是否有基于旧标记的旧答案）

Answer 2

我想你想这样做

＆＃13;

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

＆＃13;

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

＆＃13;

CSS - 使用选择器：不

2 个答案: