如何在 CSS 中对 H1 到 H6 进行分组？答案

【问题标题】：How can I group H1 to H6 in CSS?如何在 CSS 中对 H1 到 H6 进行分组？
【发布时间】：2021-12-31 17:20:13
【问题描述】：

我可以对从 H1 到 H6 的所有标题应用 CSS 样式吗？

【问题讨论】：

标签： html css

【解决方案1】：

如果你的意思是你想要一个针对所有标题元素的 CSS 选择器，那么不。您必须指定每个标签名称。

例子：

h1, h2, h3, h4, h5, h6 { margin: 5px 0; font-weight: bold; }

【讨论】：

【解决方案2】：

h1,h2,h3,h4,h5,h6 {
  color: #F00;
}

【讨论】：

【解决方案3】：

你可以用 css 做到这一点。使用以下内容：

h1, h2, h3, h4, h5, h6 { color:red; /* and the rest of your styles */ }

【讨论】：

【解决方案4】：

如果你想将aside类应用到h1~h6，你需要写如下：

aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {
    text-align: center;
}

似乎没有办法提取常见的aside 类。

你可以把上面提取到

.aside {
    h1,h2,h3,h4,h5,h6 {
       text-align: center;
    }
}

【讨论】：

【解决方案5】：

现在还没有嵌套，但很快......

目前...从今年 2021 年开始，所有的市长浏览器都支持 :is()。

aside :is(h1, h2, h3, h4, h5, h6) {
     all: unset;
     margin-block: 3ex; 
     font-weight: bold;
}

【讨论】：

【解决方案6】：

至少在 Firefox 中似乎没有遵循惯例

aside h2 {
  text-align: center;
}

只会影响作为side子的h2

aside h1,h2,h3,h4,h5,h6 {
  text-align: center;
}

似乎影响所有标题，无论是否是side的孩子。

要么 firefox 有错误，要么 CSS 的语法不太合乎逻辑。

【讨论】：