我想定位页面上的所有h标签。我知道你可以这样

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

但是使用高级CSS选择器有没有更有效的方法呢？例如：

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

（但显然这是行不通的）

不可以，在这种情况下，您需要使用逗号分隔的列表。

这不是基本的CSS，但是如果您使用的是LESS（http://lesscss.org），则可以使用递归操作：

.hClass (@index) when (@index > 0) {
    h@{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Sass（http://sass-lang.com）将允许您管理此问题，但不允许递归；它们具有@for以下实例的语法：

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

如果您没有使用像LESS或Sass这样的可编译为CSS的动态语言，则一定要检查以下选项之一。它们确实可以简化CSS开发并使之更加动态。

如果您使用的是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;
}

因为我们在谈论预处理器，所以SCSS + Compass使这变得轻而易举。

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

您可以在这里了解所有Compass帮助器选择器：

触控笔的选择器插值

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

所有h标签（h1，h2等）的jQuery选择器都是“：header”。例如，如果要使用jQuery将所有h标签变成红色，请使用：

$(':header').css("color","red")

要使用普通CSS解决此问题，请在h1..h6元素的祖先中查找模式：

<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) { /* ... */ }

将来，随着Web标准随着时间的推移不断发展，高级伪类选择器（例如:has()和）和后续同级组合器（~）将提供更多控制。

您还可以使用PostCSS和自定义选择器插件

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

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

输出：

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

如果您想使用单个选择器来定位它们，则可以将文档中的所有标题分类。

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

和在CSS

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

我并不是说这始终是最佳做法，但是它可能会很有用，而且在许多方面，更容易实现语法定位，

因此，如果您在html中为所有h1到h6提供相同的.heading类，则可以为使用该CSS工作表的所有html文档修改它们。

有利的是，与“ section div文章h1等{}”相比，全局控制更多，

不利的一面是，与其在css中调用所有选择器，不如在html中输入更多内容，但我发现在html中拥有一个以所有标题为目标的类可能是有益的，只是要注意CSS，因为冲突可能来自

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

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