纯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;
}

如果你想用一个选择器对文档中的所有标题进行分类，如下所示:

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

在CSS中

.heading{
    color: #Dad;
    background-color: #DadDad;
}

我并不是说这总是最佳实践，但它可能是有用的，对于目标语法来说，在许多方面都更容易，

所以如果你给所有h1到h6在html中相同的。heading类，那么你可以修改他们的任何html文档，利用css表。

好处是，与“section div article h1, etc{}”相比，更多的全局控制，

缺点，而不是在css中调用所有的选择器，你将在html中有更多的输入，但我发现，在html中有一个类的目标所有标题可以是有益的，只是要小心在css的优先级，因为冲突可能会产生

以下是我仅用(现代)CSS来解决这个问题的尝试。

背景:在Joplin(非常好的笔记应用程序，链接)，有一个userfile.css，你可以写你的自定义CSS显示和导出的标记笔记。

我想把所有的标题直接放在(相邻的兄弟姐妹)某些标签之后，即p, ul, ol和nav，在两者之间添加一个边距。因此:

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6  {
  margin-top: 2em;
}

哇。很长时间。这样的选择器。

于是我来到这里，学习，尝试:

p   + :is(h1, h2, h3, h4, h5, h6),
ul  + :is(h1, h2, h3, h4, h5, h6),
ol  + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

嗯。短得多。好了。

然后，我突然想到:

:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

耶，这个也有用!怎么amazoomble !

这也可以使用:where()或其他CSS组合符，如~甚至(space)来创建CSS选择器的“矩阵”，而不是非常长的列表。

credit:本页上所有引用:is()选择器的答案。

不，在这种情况下，用逗号分隔的列表才是你想要的。

使用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;