Question

我有一个css：

.form-group input[type=checkbox]:not(.form-group div.checkbox input[type=checkbox]) {
    margin-top: 10px;
}

其目的是为没有margin-top的复选框设置div.checkbox 但我想对div.checkbox

中的复选框使用默认css

然而，当我检查css时，我收到了这个警告，这样做的正确方法是什么？感谢。

Answer 1

由于CSS :not() selector takes only simple selectors as argument并且根据W3C规范，simple selector是一个类型选择器，通用选择器，属性选择器，类选择器，ID选择器，伪类。

.form-group input[type=checkbox]:not(.form-group div.checkbox input[type=checkbox]) {
    margin-top: 10px;
}

上述选择器中使用的参数是简单选择器的序列或链。

在我看来，否定伪类选择器是最复杂的CSS选择器，如果在中间的某个地方引入一个不遵守规则的元素，它会变得非常混乱。例如，选择器div:not(.checkbox) input[type=checkbox]将仅排除以下结构中的第二个复选框。

＆＃13;

div:not(.checkbox) input[type=checkbox] {
  margin-top: 10px;
  outline: 2px solid red;
}

＆＃13;

<div class='something-else'>
  <input type='checkbox' />
</div>
<div class='checkbox'>
  <input type='checkbox' />
</div>
<div class='checkbox'>
  <div class='something-else'>
    <input type='checkbox' />
  </div>
</div>
<div class='something-else'>
  <div class='checkbox'>
    <input type='checkbox' />
  </div>
</div>

＆＃13;

您可能已经预计最后两个复选框也被排除在外，因为它们上面有一个div.checkbox祖先，但这并不会发生，因为它们碰巧有1个非div.checkbox祖先这使元素得到匹配。这就是使用此选择器变得复杂的原因。

如果您的HTML结构类似于以下代码段中的结构，那么您可以使用直接子选择器和否定伪类的组合来仅设置不是{{1}的一部分的复选框祖先。

＆＃13;

div.checkbox

＆＃13;

.form-group > div:not(.checkbox) input[type=checkbox],
.form-group > input[type=checkbox] {
  margin-top: 10px;
  outline: 2px solid red;
}

＆＃13;

否则，您可以一般性地为所有复选框编写规则，然后覆盖<form class='form-group'> <input type='checkbox' /> <div class='checkbox'> <input type='checkbox' /> </div> <div class='not-checkbox'> <input type='checkbox' /> </div> <div class='checkbox'> <div class='something-else'> <input type='checkbox' /> </div> </div> <div class='not-checkbox'> <div class='something-else'> <input type='checkbox' /> </div> </div> </form>中存在的那些规则。

＆＃13;

div.checkbox

＆＃13;

.form-group input[type=checkbox] {
  margin-top: 10px;
  outline: 2px solid red;
}
.form-group div.checkbox input[type=checkbox] {
  margin-top: 0px;
  outline: none;
}

＆＃13;

CSS not selector - 在函数参数中缺少逗号

1 个答案: