SCSS+Compass使这变得简单，因为我们谈论的是预处理器。

#{headings(1,5)} {
    //definitions
  }

你可以在这里了解所有的Compass助手选择器:

使用scss可以循环6，并使用逗号分隔符将空变量$heading附加

$headings: ();

@for $index from 1 through 6 {
  $headings: list.append($headings, h#{$index}, $separator: comma);
}

#{$headings} {
  --default: var(--dark);
  color: var(--default);
}

由于@steve

手写笔的选择插值

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;

纯CSS

使用纯css有两种方法。这将针对页面内的所有标题元素(按要求)。

:is(h1, h2, h3, h4, h5, h6) {}

这一个做了同样的事情，但保持特异性为0。

:where(h1, h2, h3, h4, h5, h6) {}

与PostCSS

你也可以使用PostCSS和自定义选择器插件

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

:--headings {
  margin-top: 0;
}

输出:

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

SCSS+Compass使这变得简单，因为我们谈论的是预处理器。

#{headings(1,5)} {
    //definitions
  }

你可以在这里了解所有的Compass助手选择器:

如果你正在使用SASS，你也可以使用这个mixin:

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

像这样使用它:

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

编辑:我个人最喜欢的方法是在每个标题元素上扩展一个占位符选择器。

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

然后我可以瞄准所有的标题，就像我瞄准任何单个类一样，例如:

.element > %headings {
    color: red;
}