Question

我有html for。恩。像这样：

<form class="smart-form">
  <div>
    <p></p>
    <i></i>
    <div>
      <span class="classname"><b>text</b></span>
    </div>
  </div>
</form>

所有表单元素都有css代码，但我需要除了这个规则以外的所有元素.classname：

.smart-form *,
.smart-form *:after,
.smart-form *:before {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

我试过这样：

.smart-form *:not(> .classname *) {} // but its wrong

Answer 1

来自@ {BoltClock的this SO answer♦：

:not()一次只接受一个简单的选择器;这在Selectors 3规范中提到：

...

如果你想单独使用这个否定，选择所有其他元素，那么就没有办法只使用选择器了。

换句话说，无法将后代选择器嵌套在:not()选择器中。

作为替代方案，我建议你的方法有一些范式转换：不是选择除类.classname内的所有元素，而是添加所有规则你想要其他元素，然后通过调整.classname样式来反转它们。即，：

.smart-form * {
    /* general CSS styles for .smart-form children */
}
.smart-form .classname, form .classname * {
    /* specific CSS styles for .classname children */
}

这应该选择类.classname的所有后代。

.smart-form *,
.smart-form *:after,
.smart-form *:before {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

/* you can use initial or auto in most cases to set the properties back to default */
.smart-form .classname, .smart-form .classname * {
  margin: initial;
  padding: initial;
  box-sizing: initial;
  -moz-box-sizing: initial;
}

<form class="smart-form">
  <div>
    <p></p>
    <i></i>
    <div>
      <span class="classname"><b>text</b></span>
    </div>
  </div>
</form>

在上面的示例中，样式设置为 all 元素，但之后它们被.classname的反转。

Answer 2

我认为你不应该把css放在它上面，然后把css放在你想要的div里面。如果您只想要例外，那么放css有什么意义？

如何除了div中的所有元素css与类？

2 个答案: