我可以用一个选择器瞄准所有<H>标签吗?

我想在一个页面上的所有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;
}

(但显然这行不通)

当前回答

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

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

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

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

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

其他回答

如果你正在使用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;
}

如果你想用一个选择器对文档中的所有标题进行分类，如下所示:

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

在CSS中

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

我并不是说这总是最佳实践，但它可能是有用的，对于目标语法来说，在许多方面都更容易，

所以如果你给所有h1到h6在html中相同的。heading类，那么你可以修改他们的任何html文档，利用css表。

好处是，与“section div article h1, etc{}”相比，更多的全局控制，

缺点，而不是在css中调用所有的选择器，你将在html中有更多的输入，但我发现，在html中有一个类的目标所有标题可以是有益的，只是要小心在css的优先级，因为冲突可能会产生

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

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

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

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

SCSS+Compass使这变得简单，因为我们谈论的是预处理器。

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

你可以在这里了解所有的Compass助手选择器:

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

推荐文章