如何用類除div中的所有元素CSS？

Question

我有HTML。 恩。 像這樣：

<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♦得到的答案中 ：

:not()只接受一個簡單的選擇器； 在Selectors 3規范中提到了這一點：

...

如果您想單獨使用這種否定，選擇所有其他元素，那么就沒有辦法只使用選擇器。

換句話說，沒有辦法將后代選擇器嵌套在:not()選擇器中。

---

作為替代方案，我建議您在方法上進行一些范式轉換：不要選擇除 .classname類中的所有元素以外的所有元素，而是為其他元素添加所需的所有規則，然后通過調整.classname樣式。 IE中：

.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> 

在上面的示例中，樣式設置為所有元素，但隨后僅用於.classname的樣式被顛倒。

Answer 2

我認為您不應該將CSS放在上面，而應該將CSS放在div中您想要的位置。 如果您只想擁有異常，放置css有什么意義？