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

jQuery的所有h标签(h1, h2等)的选择器是“:header”。例如，如果你想用jQuery把所有的h标签都变成红色，可以使用:

(头”中写道:“美元). css(“颜色”、“红”)

2022年7月更新

未来来了，:is选择器就是你要找的东西，正如@silverwind在2020年给出的答案中所描述的那样(现在是选定的答案)。

原来的答案

要用香草CSS解决这个问题，请在h1..编辑元素:

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

如果你能发现模式，你就可以写一个选择器来瞄准你想要的东西。给定上面的例子，所有h1..h6元素可以通过组合来自CSS3的:first-child和:not伪类来作为目标，在所有现代浏览器中都可以使用，如下所示:

.row :first-child:not(header) { /* ... */ }

在未来，高级伪类选择器，如:has()和随后的兄弟组合符(~)，将随着Web标准的不断发展而提供更多的控制。

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

新的:is() CSS伪类可以在一个选择器中完成。

例如，下面是如何瞄准容器元素中的所有标题:

.container :is(h1, h2, h3, h4, h5, h6)
{
    color: red;
}

大多数浏览器现在都支持:is()，但请记住，大多数在2020年之前制作的浏览器都不支持没有前缀的它，所以如果你需要支持旧浏览器，请谨慎使用这个前缀。

在某些情况下，您可能希望使用:where()伪类，它与: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