我想在一个页面上的所有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;
}
(但显然这行不通)
我想在一个页面上的所有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;
}
(但显然这行不通)
当前回答
jQuery的所有h标签(h1, h2等)的选择器是“:header”。例如,如果你想用jQuery把所有的h标签都变成红色,可以使用:
(头”中写道:“美元). css(“颜色”、“红”)
其他回答
如果你想用一个选择器对文档中的所有标题进行分类,如下所示:
<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>
在CSS中
.heading{
color: #Dad;
background-color: #DadDad;
}
我并不是说这总是最佳实践,但它可能是有用的,对于目标语法来说,在许多方面都更容易,
所以如果你给所有h1到h6在html中相同的。heading类,那么你可以修改他们的任何html文档,利用css表。
好处是,与“section div article h1, etc{}”相比,更多的全局控制,
缺点,而不是在css中调用所有的选择器,你将在html中有更多的输入,但我发现,在html中有一个类的目标所有标题可以是有益的,只是要小心在css的优先级,因为冲突可能会产生
不,在这种情况下,用逗号分隔的列表才是你想要的。
使用scss可以循环6,并使用逗号分隔符将空变量$heading附加
$headings: ();
@for $index from 1 through 6 {
$headings: list.append($headings, h#{$index}, $separator: comma);
}
#{$headings} {
--default: var(--dark);
color: var(--default);
}
由于@steve
纯CSS
使用纯css有两种方法。这将针对页面内的所有标题元素(按要求)。
:is(h1, h2, h3, h4, h5, h6) {}
这一个做了同样的事情,但保持特异性为0。
:where(h1, h2, h3, h4, h5, h6) {}
与PostCSS
你也可以使用PostCSS和自定义选择器插件
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
:--headings {
margin-top: 0;
}
输出:
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
jQuery的所有h标签(h1, h2等)的选择器是“:header”。例如,如果你想用jQuery把所有的h标签都变成红色,可以使用:
(头”中写道:“美元). css(“颜色”、“红”)