我可以定位所有的 <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.
相关文章