CSS是否有創建更緊湊代碼的子面板的方法？

Question

普通的編程語言有這樣的東西

int x, y, z; 

，這樣你就不必寫出

int x; 
int y; 
int z; 

在CSS中我經常發現自己不必寫這樣的東西

.some-class h1, .some-class h3, .some-class p { margin-bottom: 1.2em; } 

當它看起來應該像

.some-class (h1, h3, p) { margin-bottom: 1.2em; } 

有沒有這樣的事情？

Answer 1

您將需要一個CSS預處理器，它使用縮進顯示死者。以下是如何會看在SASS：

.some-class { 
    h1, h3, p { 
     color: red; 
    } 
} 

Answer 2

是，CSS Selectors level 4定義稱爲僞類:matches

你使用這樣的：

.some-class :matches(h1, h3, p) { margin-bottom: 1.2em; } 

然而，瀏覽器的支持是非常參差不齊的，見這個CSS技巧文章的更多信息：https://css-tricks.com/almanac/selectors/m/matches