我想在一个页面上的所有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;
}
(但显然这行不通)
当前回答
使用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
其他回答
手写笔的选择插值
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
不,在这种情况下,用逗号分隔的列表才是你想要的。
jQuery的所有h标签(h1, h2等)的选择器是“:header”。例如,如果你想用jQuery把所有的h标签都变成红色,可以使用:
(头”中写道:“美元). 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
如果你正在使用SASS,你也可以使用这个mixin:
@mixin headings {
h1, h2, h3,
h4, h5, h6 {
@content;
}
}
像这样使用它:
@include headings {
font: 32px/42px trajan-pro-1, trajan-pro-2;
}
编辑:我个人最喜欢的方法是在每个标题元素上扩展一个占位符选择器。
h1, h2, h3,
h4, h5, h6 {
@extend %headings !optional;
}
然后我可以瞄准所有的标题,就像我瞄准任何单个类一样,例如:
.element > %headings {
color: red;
}