我可以定位所有的 <H>带有单个选择器

问题描述

我想定位页面上的所有 h 标记.我知道你可以这样做......

I'd like to target all h tags on a page. I know you can do it this way...

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

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

but is there a more efficient way of doing this using advanced CSS selectors? e.g something like:

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

(但显然这不起作用)

推荐答案

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

The new :is() CSS pseudo-class can do it in one selector.

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

For example, here's how you could target all headings inside a container element:

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

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

Most browsers now support :is(), but keep in mind that most browsers made before 2020 didn't support it without a prefix, so be careful about using this if you need to support older browsers.

在某些情况下，您可能希望使用 :where() 伪类，与 :is() 非常相似，但具体规则不同.

In some cases, you may instead want to use the :where() pseudo-class, which is very similar to :is() but has different specificity rules.

这篇关于我可以定位所有的 <H>带有单个选择器的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！