問題描述
我想定位頁面上的所有 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;
}
現(xiàn)在大多數(shù)瀏覽器都支持 :is()，但請記住，大多數(shù) 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() 非常相似，但具體規(guī)則不同.
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模板網(wǎng)！