CSS是否可以嵌套（就像SASS一樣）？

Question

這可能是一個非常愚蠢的問題，但我找不到任何東西，而且看起來如此顯而易見：是否可以像SASS一樣嵌套CSS？

例如，我想在某個頁面上定義一個h1標簽，所以我這樣寫：

body.certain_page h1 {
  font-size: 12px;
}

到現在為止還挺好。 如果我希望這種樣式適用於多個頁面，我會寫：

body.certain_page h1, body.other_page h1 {
  font-size: 12px;
}

現在，當您以這種方式定義很多規則時，它會很累人。 這樣寫起來會容易得多：

body.certain_page, body.other_page {
  h1 {
    font-size: 12px;
  }
}

就像媒體查詢一樣。 為什么不可能呢？ 還是我錯過了什么？

Answer 1

不，現在不可能了，這就是SASS將嵌套列為功能的原因。

Answer 2

好吧，正如@destroy已經回答的那樣，您不能使用CSS嵌套選擇器，這就是開發人員選擇LESS和SASS預處理程序的原因。 最小化CSS的最好辦法是將諸如

div, p, i {
   color: #f00;
   /* All the three elements will have the same color */
}

您還可以在父選擇器中聲明基本屬性，以便可以輕松繼承它們，而不必在每個屬性上一次又一次地調用它們。

body {
   font-size: 14px;
   font-family: Arial;
   color: #515151;
}

上面的屬性很容易被p的元素繼承，因此您不必每次都聲明font-family或font-size除非並且直到您希望為特定元素設置不同的font-family為止。通過使用更具體的選擇器（例如

.class_name p {
   font-family: Open Sans, Arial;
}

你有普遍選擇這也將緩解了過長時間的選擇，好比說你想要color red的所有嵌套有一個叫做類中的特定元素的元素.class_name所以不是做

 
 
 
 
  
  
  .class_name p, .class_name div, .class_name fieldset { /* This is really bad */ }
 
 
  

相反，您可以將以上內容寫為

.class_name * {
   /* Much better */
}

---

結束語：學習CSS選擇器，這是您可以找出的唯一方法，並且可以自己優化CSS，而選擇器完全取決於DOM，因此沒有預定義的技術，但是您應該使選擇器保持簡單，不要過於復雜，否則您最終將寫出越來越多的特定規則，這將導致更多的100行糟糕的CSS ...

---

此外， 這是 Google提供的一種便捷工具，您可以隨時使用它來優化性能。

Answer 3

使用CSS選擇器4， :matches偽類可以實現類似的功能：

:matches(body.certain_page, body.other_page) h1 { ... }

它已經在基於Webkit / Blink和基於Gecko的瀏覽器中可用（分別為:-webkit-any()和:-moz-any() ），但僅作為實驗功能。 在大多數瀏覽器采用CSS選擇器4之前，使用CSS預處理程序似乎是防止在編寫CSS時重復進行此類操作的唯一解決方案。