我想在一个页面上的所有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

其他回答

不,在这种情况下,用逗号分隔的列表才是你想要的。

如果你正在使用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;
}

2022年7月更新

未来来了,:is选择器就是你要找的东西,正如@silverwind在2020年给出的答案中所描述的那样(现在是选定的答案)。

原来的答案

要用香草CSS解决这个问题,请在h1..编辑元素:

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

如果你能发现模式,你就可以写一个选择器来瞄准你想要的东西。给定上面的例子,所有h1..h6元素可以通过组合来自CSS3的:first-child和:not伪类来作为目标,在所有现代浏览器中都可以使用,如下所示:

.row :first-child:not(header) { /* ... */ }

在未来,高级伪类选择器,如:has()和随后的兄弟组合符(~),将随着Web标准的不断发展而提供更多的控制。

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