CLOSED CSS避免继承特定div中的输入

Question

我为此工作了将近2天，我找不到正确的帮助来回答我的问题。我希望你能帮助我:)

我有一个带有ID ("myDiv")的主div和一个用特定属性覆盖输入的样式表。但是，有时我不想得到样式表规范。

在下面的例子中，input1需要接收css规范，但我希望input2和input3是明确的。如果可能的话，自己去。

我想你明白这是一个大样式表的小样本=)

为例:

<div id="myDiv">
<input id="input1" />
<div class="Picker">
<input id="input2" />
<div>
<input id="input3" />
</div> 
</div>
... Other html markup
</div>

样式表:

#myDiv input {
width: 40%;
border: 1px solid #c4c4c4;
}

我试过了，但是它根本不起作用(:not documentation from mozilla):

#myDiv div:not(.Picker) input {
width: 40%;
border: 1px solid #c4c4c4;
}

我尝试了其他方法(直接继承):

#myDiv div:not(.Picker) > input {
width: 40%;
border: 1px solid #c4c4c4;
}

感谢大家的关注。为我的糟糕英语道歉:)

Bobuche

Answer 1

如果需要匹配#input1或其他输入，则不那么清楚

在第一种情况下使用

#myDiv input#input1 {
...
}

否则使用:not()

排除第一个输入

#myDiv input:not(#input1) {
...
}

这两个选择器都比#myDiv input具有更高的特异性，因此您可以覆盖已定义的属性。

Answer 2

排除通常有问题。在这里，您必须说"任何#myDiv的子输入"或"#myDiv的子输入的后代"(.Picker除外)。所以

#myDiv > input, #myDiv > :not(.Picker) input { ... }

#myDiv > input, #myDiv > :not(.Picker) input { 
border: 2px solid red;
}

<div id="myDiv">
<label for="input1">input1: </label><input id="input1" />
<div class="Picker">
<label for="input2">input2: </label><input id="input2" />
<div>
<label for="input3">input3: </label><input id="input3" />
</div> 
</div>
<div class="Something else">
<label for="input4">input4: </label><input id="input4" />
<div>
<label for="input5">input5: </label><input id="input5" />
</div> 
</div>
... Other html markup
</div>

Answer 3

如果你想在id为input1的输入上应用CSS属性，你可以简单地使用selector #input1进行选择由于id属性对每个标签都是唯一的，所以它不会影响其他html输入标签。

#input1 {
}

如果你想在id为input1和input2的输入上应用CSS，可以使用以下方法之一

#input1,#input2{
}
.Picker input{
}