【问题标题】：Can I target all <H> tags with a single selector?我可以使用单个选择器定位所有 <H> 标记吗？
【发布时间】：2011-11-24 05:52:25
【问题描述】：

我想定位页面上的所有 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;
}

（但显然这不起作用）

【问题讨论】：

这在选择h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...时变得越来越乏味

标签： css css-selectors

【解决方案1】：

不，在这种情况下，您需要一个逗号分隔的列表。

【讨论】：

对于那些从谷歌登陆这里并想知道 逗号分隔列表 在 CSS 中的含义的人，这是 OP 给出的第一个示例。即h1, h2, h3 {}。
当它出现在长选择器的中间时，可能会导致大量重复。上面@silverwind 的回答，推荐使用:is()，可以让这些实例保持干燥。

【解决方案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 开发并使您的 CSS 开发更加动态。

【讨论】：

我很确定手动输入比在 CSS 中创建 for 循环（如 h1、h2、h3...）花费更少的时间和空间......现在和以后更清楚地理解。
¯_(ツ)_/¯ "can" != "should".即便如此，Sass/LESS 选项为您提供了 vanilla CSS 所没有的可扩展性。想想像font-size: (48px / @index)这样的东西。
如果它最适合您的需求，那没关系。正如之前的评论中提到的，如果您由于某种原因需要对 LESS 或 Sass 中的索引进行操作，这种方法可以让您轻松完成。您的实现可以根据标头编号动态实现。
对于不想在他们的项目中集成scss/sass，但想用scss/sass生成css的人，他们可以使用这个名为sassmeister的在线工具

【解决方案3】：

如果你使用的是 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 到 SCSS+Compass 的一小步：compass-style.org/reference/compass/helpers/selectors -- headings($from, $to)
哇，两年后遇到了这个……而且编辑看起来很金！我确定我了解扩展上!optional 标志的用途吗？而且似乎在谷歌上找不到任何东西......
fwiw 我正在研究这是否可以通过 styled-components 完成

【解决方案4】：

SCSS+Compass 让这一切变得轻而易举，因为我们谈论的是预处理器。

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

You can learn about all the Compass helper selectors here:

【讨论】：

【解决方案5】：

Stylus's selector interpolation

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

【讨论】：

这不起作用。请在发布答案之前测试您的代码，因为这对任何可能尝试使用它的人都是有害的。我用经过测试和工作的代码编辑了你的答案。
@Hybridwebdev 对我来说似乎是working。这也是文档描述iteration的方式

【解决方案6】：

要使用 vanilla 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() 和 subsequent-sibling combinators (~) 等高级伪类选择器将提供更多控制。

【讨论】：

【解决方案7】：

您也可以使用 PostCSS 和 custom selectors plugin

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

【讨论】：

【解决方案8】：

如果您想使用单个选择器来定位文档中的所有标题，您可以对它们进行分类，如下所示，

<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 article h1, etc{}”相比，有更多的全局控制权，

缺点，而不是在 css 中调用所有选择器，您将在 html 中输入更多内容，但我发现在 html 中设置一个针对所有标题的类可能是有益的，只是要小心css 中的优先级，因为冲突可能来自

【讨论】：

【解决方案9】：

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

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

【讨论】：

您能否仅定位特定 div 中的所有标题？例如$('.my_div :header').css("color","red")?

【解决方案10】：

新的:is() CSS pseudo-class 可以在一个选择器中完成。

例如，您可以通过以下方式定位容器元素内的所有标题：

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

现在大多数浏览器都支持:is()，但请记住，2020 年之前制造的大多数浏览器不支持不带前缀的它，因此如果您需要支持旧版浏览器，请谨慎使用。

在某些情况下，您可能希望使用:where() 伪类，它与:is() 非常相似，但具有不同的特异性规则。

【讨论】：

澄清一下，像这样使用:is() 是没有意义的。当您需要将一堆可能的值与另一个匹配时使用它，例如 :is(h1, h2, h3, h4, h5, h6) p.subby {}
确实，除非您使用每行一个选择器来格式化代码并想节省一些空间，否则这毫无意义。
在 LESS 或 SCSS 等预处理器中使用嵌套规则时，这实际上非常有用，并且可以通过防止生成嵌套规则的笛卡尔积来大幅减少 CSS 的数量。 i.imgur.com/gnYR2cH.png