使用 CSS :is() 伪类可一次性匹配多个嵌套标签，避免重复书写选择器，大幅简化对 内 –、、 及自定义 – 等标签的样式定义，并轻松扩展 :hover 和 :active 状态。
使用 css `:is()` 伪类可一次性匹配多个嵌套标签，避免重复书写选择器，大幅简化对 `chrome 98+/firefox 100+/safari 15.4+ 支持良好）
:is() 允许将多个选择器组合成一个简洁表达式，浏览器将其视为“任一匹配即生效”，且支持伪类和复合选择器。针对本例，可这样编写：
/* 基础状态：所有指定子标签统一样式 */
a > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
font-weight: var(--medium);
color: #333;
transition: color 0.2s ease;
}
/* 悬停状态 */
a:hover > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
color: #007bff;
font-weight: var(--semibold);
}
/* 激活状态（点击时） */
a:active > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
color: #0056b3;
transform: scale(0.98);
}
? 关键说明：
-
a > :is(...)中的>是子选择器，确保仅作用于<a></a>的直接子元素，避免意外影响深层嵌套； -
:is()内部无需空格分隔，各标签名用逗号分隔即可； -
:is()支持任意合法选择器，包括类名（.highlight）、属性选择器（[data-emphasis]）甚至其他伪类（但注意层级逻辑）； - 若需兼容旧版浏览器（如 IE 或早期移动端），可借助 PostCSS 插件
postcss-is-pseudo-class自动展开为兼容写法。
? 进阶提示：
若 <d1>–<d6></d6></d1> 是语义化自定义元素（Web Components），建议同时为其定义默认样式，并配合 :where()（权重为 0）实现更灵活的样式覆盖策略。但对本场景，:is() 已是最简、最直观、最符合现代开发实践的解决方案。
从此告别 28 行重复代码——一行 :is()，清晰、健壮、可维护。
