我想选择所有不属于有input类的父母的孩子的no-material
我使用了这个选择器main *:not(.no-material) input，对我来说，它应该可以工作并选择最后4个input，但事实并非如此。
这不可能，或者我在这里缺少什么？
注意，我知道这可以通过首先选择all，然后取消选择一些来完成，尽管这正是我想要避免的。
Stack snippet
main *:not(.no-material) input {
border: 1px solid red;
}<main>
<div class="no-material">
<input name="no-1">
</div>
<div>
<label class="no-material">
<input name="no-2">
</label>
</div>
<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span class="no-material">
<input name="no-4">
</span>
</label>
</div>
<div>
<input name="no-1">
</div>
<div>
<label>
<input name="no-2">
</label>
</div>
<div>
<label>
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span>
<input name="no-4">
</span>
</label>
</div>
</main>
作为旁注，如果这样完成，它就可以正常工作并选择前4 input的
main *.no-material input {
border: 1px solid blue;
}
Stack snippet
main *.no-material input {
border: 1px solid blue;
}<main>
<div class="no-material">
<input name="no-1">
</div>
<div>
<label class="no-material">
<input name="no-2">
</label>
</div>
<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span class="no-material">
<input name="no-4">
</span>
</label>
</div>
<div>
<input name="no-1">
</div>
<div>
<label>
<input name="no-2">
</label>
</div>
<div>
<label>
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span>
<input name="no-4">
</span>
</label>
</div>
</main>
我还想从我获得主要代码示例的地方this post，但他们寻求Javascript和querySelectorAll()的解决方案，我希望有一个CSS规则（或两个:)
答案 0 :(得分：3)
这里的问题是你的代码满足太多场景。
例如，以下内容将满足您的规则。
<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>
这是因为span是一个没有该类在输入之前的元素。
您可以做的是将所需的规则应用于所有输入，然后覆盖那些使该类恢复为原始样式的规则。
例如：
main input {
border: 1px solid blue;
}
main .no-material input {
border: 1px solid black;
}
答案 1 :(得分：1)
您甚至可以尝试如下，因为类.no-material的放置位于不同的标记中，因此您可以定位每个标记并在其中搜索类和样式，
main * input{
border:1px solid red;
}
div[class*="no-material"] input{
border: 1px solid #ccc;
}
label[class*="no-material"] input{
border: 1px solid #ccc;
}
span[class*="no-material"] input{
border: 1px solid #ccc;
}<main>
<div class="no-material">
<input name="no-1">
</div>
<div>
<label class="no-material">
<input name="no-2">
</label>
</div>
<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span class="no-material">
<input name="no-4">
</span>
</label>
</div>
<div>
<input name="no-1">
</div>
<div>
<label>
<input name="no-2">
</label>
</div>
<div>
<label>
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span>
<input name="no-4">
</span>
</label>
</div>
</main>
答案 2 :(得分：1)
我想选择不是父母子女的所有
input拥有班级no-material。
该请求中暗示了解决方案： ...不是 孩子 ... < / p>
main *:not(.no-material) input
main *:not(.no-material) > input
main *:not(.no-material) > input {
border: 1px solid red;
}<main>
<div class="no-material">
<input name="no-1">
</div>
<div>
<label class="no-material">
<input name="no-2">
</label>
</div>
<div>
<label class="no-material">
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span class="no-material">
<input name="no-4">
</span>
</label>
</div>
<div>
<input name="no-1">
</div>
<div>
<label>
<input name="no-2">
</label>
</div>
<div>
<label>
<span>
<input name="no-3">
</span>
</label>
</div>
<div>
<label>
<span>
<input name="no-4">
</span>
</label>
</div>
</main>
原始代码匹配所有后代，而不仅仅是孩子。所以它无法按预期工作。