by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11894
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、了解:heading伪类

CSS又出了个名为:heading的伪类，用来匹配h1~h6元素的，也就是标题元素。

如果是其他标签元素，但是设置了role="heading"是不会匹配的。

:heading伪类的选择器优先级和类名一样。

二、关于:heading()函数

:heading()函数是用来匹配特定的标题元素，你可以理解为用来筛选标题元素的，语法如下所示：

:heading([ <An+B> [, <An+B>]* | even | odd ]) {
  /* ... */
}

举例示意说明：

先看even和odd两个关键字的匹配结果：

/* 匹配 <h1>、<h3> 和 <h5> 元素 */
:heading(odd)

* 匹配 <h2>、<h4> 和 <h6> 元素 */
:heading(even)

再看An+B参数的使用示意，其中n从0开始，A和B都是可以是负数的整数：

/* 匹配 <h3> 和 <h4> 元素 */
:heading(3, 4) {
  font-weight: 100;
}
/* 匹配从 <h3> 至 <h1>元素 */
:heading(-n + 3) {
  color: tomato;
}
/* 匹配 <h1> 和 <h4> 元素 */
:heading(3n + 1) {
  font-style: italic;
}
/* 匹配 <h5> 之后的标题元素 */
:heading(n + 5) {
  color: slateblue;
}

用文字描述即：

• :heading(3，4)匹配<h3>和<h4>元素
• :heading(-n+3)反向匹配标题元素，因此<h3>、<h2>和<h1>元素
• :heading(3n+1)匹配从<h1>开始的每三个(3n)标题元素，因此这将包括<h1>和<h4>元素
• :heading(n+5)匹配从<h5>开始的标题元素，并将包括<h6>。

选择器优先级

:heading()函数选择器的优先级和类名一致。

三、点评：匪夷所思的蛋疼特性

说实话，我跟踪CSS这门语言十几年了，从没有像今天这么觉得蛋疼过。

以往出现什么CSS新特性，我总能见到其设计的目的，和解决问题的场景。

但是，但是……我今天也是小刀扎屁股——开了眼了，居然设计出了我一点也没看出有什么鸟用的CSS特性。

比方说这:heading伪类，就匹配h1-h6元素，请问，我下面这样书写，有什么问题：

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

我真的就在意少书写的那十几个字母：

还有那:heading(odd)和:heading(even)，看起来很快，但实际上就是几把狗屎。

我这辈子就没有遇到过就需要单单匹配h1,h3,h5元素的场景，这种明显一辈子都不会用到的语法设计了干嘛？

为了设计而设计，闲的没事找存在感吗？

CSS已经愈发无人问津了，还在搞这些边边角角，毫无意义的东西，这不是拖CSS发展的后退嘛。

气得没话说，浪费我学习的时间。

兼容性

Firefox预览版已经支持了此特性，其他浏览器还见不到影子：

我估计啊，Chrome和Safari以后也都不会支持这两个特性，实在是够烂的特性，无语至极。

算了，看看美女缓解下心情——慕沛灵仙子特写。

更新：

评论提醒了下，这个特性可能是用来匹配性质上是h1~h6的元素，而不是直接标签匹配。

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11894

（本篇完）