我可以瞄准所有<H>标签与单一选择器?

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

(但显然这行不通)

185304 次浏览
小开

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

小开

它不是基本的css，但如果你使用LESS (http://lesscss.org)，你可以使用递归来做到这一点:

.hClass (@index) when (@index > 0) {
h@{index} {
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
.hClass(@index - 1);
}
.hClass(6);

Sass (http://sass-lang.com)将允许你管理这个，但不允许递归;它们有@for语法用于这些实例:

@for $index from 1 through 6 {
h#{$index}{
font: 32px/42px trajan-pro-1,trajan-pro-2;
}
}

如果你使用的不是像LESS或Sass这样编译成CSS的动态语言，你绝对应该看看这些选项中的一个。它们可以真正简化并使您的CSS开发更加动态。

小开

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

SCSS+Compass使这变得简单，因为我们谈论的是预处理器。

#{headings(1,5)} {
//definitions
}

您可以在这里了解所有Compass助手选择器:

小开

手写笔的选择插值

for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
小开

2022年7月更新

未来来了，:is选择器就是你要找的，正如@silverwind在2020年给出的在这个答案中(现在是选定的答案)。

原来的答案

要用普通CSS解决这个问题，请在h1..h6元素的祖先中寻找模式:

<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) { /* ... */ }

将来，随着Web标准的不断发展，诸如:has()和subsequent-sibling组合子 (~)这样的高级伪类选择器将提供更多的控制。

小开

纯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;
}
小开

如果你想用一个选择器对文档中的所有标题进行分类，如下所示:

<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的优先级，因为冲突可能会产生

小开

jQuery的所有h标签(h1, h2等)的选择器是“:header”。例如，如果你想用jQuery把所有的h标签都变成红色，可以使用:

$(':header').css("color","red")

小开
最佳答案

新的:is() CSS伪类可以在一个选择器中完成。

例如，下面是如何瞄准容器元素中的所有标题:

.container :is(h1, h2, h3, h4, h5, h6)
{
color: red;
}

大多数浏览器现在都支持:is()，但请记住，大多数在2020年之前制作的浏览器不支持没有前缀的:is()，所以如果你需要支持旧浏览器，请谨慎使用这个前缀。

在某些情况下，你可能想要使用:where()伪类，它与:is()非常相似，但具有不同的特异性规则。

小开

使用scss，可以使用逗号分隔符将循环到6和附加转换为空变量$headings

$headings: ();


@for $index from 1 through 6 {
$headings: list.append($headings, h#{$index}, $separator: comma);
}


#{$headings} {
--default: var(--dark);
color: var(--default);
}

由于@steve

小开

以下是我仅用(现代)CSS来解决这个问题的尝试。

背景:在Joplin(非常好的笔记应用程序，链接)中，有一个userfile.css，你可以在其中编写自定义CSS来显示和导出标记笔记。

我想针对所有标题 后直接(相邻的兄弟姐妹)特定标签，即p， ul， ol和nav，在两者之间添加一个边距。因此:

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6  {
margin-top: 2em;
}

哇。很长时间。这样的选择器。

于是我来到这里，学习，尝试:

p   + :is(h1, h2, h3, h4, h5, h6),
ul  + :is(h1, h2, h3, h4, h5, h6),
ol  + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}

嗯。短得多。好了。

然后，我突然想到:

:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}

耶，这个也有用!怎么amazoomble !

这也可以与:where()或其他CSS组合符一起工作，如~或甚至 (space)来创建“matrix”;CSS选择器，而不是很长的列表。

credit:本页上引用:is()选择器的所有答案。


提交答案