问题描述
我想定位页面上的所有 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.