我想定位页面上的所有 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 伪类可以在一个选择器中完成。
:is()
例如,您可以通过以下方式定位容器元素内的所有标题:
.container :is(h1, h2, h3, h4, h5, h6) { color: red; }
大多数浏览器现在都支持:is(),但请记住,大多数 2020 年之前制作的浏览器不支持不带前缀的,因此如果您需要支持较旧的浏览器,请谨慎使用。
在某些情况下,您可能希望使用:where()伪类,它非常类似于:is()但具有不同的特异性规则。
:where()