我可以使用单个选择器定位所有 <H> 标记吗？

Posted 2023-03-06

技术标签:

【中文标题】我可以使用单个选择器定位所有 <H> 标记吗？【英文标题】：Can I target all <H> tags with a single selector? 【发布时间】：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, ...时变得越来越乏味 【参考方案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
  hn
    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

以上是关于我可以使用单个选择器定位所有 <H> 标记吗？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用选择器来定位除第一个之外的所有目标