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定义了一个名为L3

的伪类

你这样使用它：

:matches

但是，浏览器支持非常参与，请参阅此CSS Tricks文章了解更多信息：https://css-tricks.com/almanac/selectors/m/matches