Css 我可以针对所有<；H>；使用单个选择器的标签？

我希望将页面上的所有h标记作为目标。我知道你可以这样做

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

但是，有没有更有效的方法使用高级CSS选择器来实现这一点？e、 g类似于：

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

---

（但显然这不起作用）

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

它不是基本的css，但如果您使用较少（），您可以使用递归来实现这一点：

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

Sass（）将允许您管理它，但不允许递归；对于这些实例，它们具有

@for

语法：

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

---

如果您没有使用编译成CSS（如LESS或Sass）的动态语言，那么您肯定应该查看以下选项之一。它们确实可以简化CSS开发并使其更具动态性。

如果您使用的是SASS，您也可以使用此混合：

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

：

's

---

要使用普通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>

---

将来，随着Web标准的不断发展，像和（

~

）这样的高级伪类选择器将提供更多的控制。

您还可以使用POSTSS和

输出：

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>

我并不是说这始终是最佳实践，但它可能很有用，而且对于语法目标，在许多方面都很容易

因此，如果您在html中为所有h1到h6提供相同的.heading类，那么您可以为任何使用该css表的html文档修改它们

好消息是，与“第1节第h1条等”相比，更多的全球控制

---

缺点是，与在css中就地调用所有选择器不同，您将在html中有更多的输入，但我发现在html中有一个类以所有标题为目标是有益的，只是要注意css中的优先级，因为所有h标记（h1、h2等）的jQuery选择器都是“：header”，这可能会产生冲突. 例如，如果您想使用jQuery使所有h标记都变成红色，请使用：

$（'：header'）.css（“颜色”、“红色”）

新功能可以在一个选择器中完成：

：is（h1、h2、h3、h4、h5、h6）{
颜色：红色；
}

当选择

h1 a:悬停，h2 a:悬停，h3 a:悬停，h4 a:悬停，…

从SCS到SCS+指南针，这是非常小的一步：--标题（$from，$to）哇，两年后遇到了这一点。。编辑看起来是金色的！我确信我理解

的目的！可选择的

标志是否在扩展面板上？而且在google上似乎找不到任何东西…fwiw我正在研究是否可以用样式化组件来实现这一点我很确定手动键入而不是在CSS中创建for循环，如h1、h2、h3。。。花费更少的时间、空间。。现在和以后更清楚地理解。”_(ツ)_/“

“can”！=“should”

。即便如此，Sass/LESS选项仍能为您提供普通CSS所无法提供的扩展性。可以考虑类似于

字体大小：（48px/@index）

。如果它最适合您的需要，那没关系。正如前面的评论中提到的，如果您出于某种原因需要在LESS或Sass中对索引进行操作，这种方法允许您轻松地进行操作。您的实现可以根据标题号进行动态。适用于那些不想在项目中集成

scss/Sass

，但希望将使用

scss/sass

生成

css

他们可以使用这个在线工具，这个工具是为那些从谷歌登陆到这里的人设计的，他们想知道逗号分隔列表在css中的含义，这是OP给出的第一个例子。也就是说，

h1，h2，h3{}这可能会导致在长选择器的中间出现大量的复制。@ SalvSun的回答上面，建议使用<代码>：（）

，允许保持此类实例干燥。这不起作用。请在发布答案之前测试您的代码，因为这对任何可能尝试使用它的人都有害。我用测试和工作代码编辑了您的答案。@Hybridwebdev这似乎是为我准备的。这也是文档所描述的，您可以只针对特定div中的所有标题吗？例如

 $（'.my_div:header'）.css（“color”，“red”）

？为了澄清这一点，像这样使用

：is（）

是没有意义的。当您需要将一组可能的值与另一个类似

：is（h1，h2，h3，h4，h5，h6）p.subby{}的值进行匹配时，请使用它

事实上，这是毫无意义的，除非您在格式化代码时每行使用一个选择器，并且希望节省一些空间。呵呵，这是一个很好的解决方法。当在预处理器（如LESS或SCSS）中使用嵌套规则时，这实际上非常有用，并且可以通过防止生成嵌套规则的笛卡尔积来大幅减少CSS的数量。

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

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