如何高效为锚点内多种标签统一设置样式（含伪类）-html教程-PHP中文网

如何高效为锚点内多种标签统一设置样式（含伪类）

使用 CSS :is() 伪类可一次性匹配多个嵌套元素并统一应用样式，大幅简化选择器书写，同时轻松支持 :hover、:active 等伪类，避免重复冗长的代码。

使用 css `:is()` 伪类可一次性匹配多个嵌套元素并统一应用样式，大幅简化选择器书写，同时轻松支持 `:hover`、`:active` 等伪类，避免重复冗长的代码。

在实际开发中，常需对 <a></a> 标签内部的多种语义化或强调型子元素（如标题 h1–h6、加粗标签 strong/b，甚至非标准但存在的 d1–d6）统一设置字体粗细、颜色等样式。若采用传统写法——例如 a > h1, a > h2, a > h3, ... ——不仅冗长易错，更会在扩展 :hover、:active 等状态时导致选择器数量爆炸式增长（如原问题中预估的 28 次重复）。

此时，现代 CSS 提供的 :is() 伪类是最佳解决方案。它允许将多个选择器封装在一个函数中，只要任一子选择器匹配，整个 :is(...) 即成立，且支持层级组合与伪类嵌套，语法简洁、可读性强、维护成本极低。

✅ 正确写法示例：

a > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
  font-weight: var(--medium);
  color: red;
}

a:hover > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
  font-weight: var(--medium);
  color: green;
}

a:active > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
  opacity: 0.8;
}

⚠️ 注意事项：

:is() 具有容错性：即使列表中包含无效选择器（如 d1 并非标准 HTML 标签），浏览器会自动忽略该条目，不影响其余有效选择器的匹配；
不支持 CSS 变量注入到 :is() 参数中，所有选择器必须为静态字符串；
浏览器兼容性良好：Chrome 100+、Firefox 100+、Safari 15.4+ 均已原生支持；旧版浏览器可通过 PostCSS postcss-is-pseudo-class 自动降级为展开式选择器；
:is() 的优先级由其内部最高优先级的选择器决定（例如 :is(h1, .highlight) 的优先级等同于 h1），不会因包裹而提升。