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