如何快速为锚点标签下的多个子标签添加:hover和:active样式？

首先纠正你之前的语法错误：你写的a > h1,h2,h3,h4,h5,h6,strong,b,d1,d2,d3,d4,d5,d6中，逗号分隔的是独立选择器，所以h2、h3等实际上是全局选择器（不是a > h2），这就是为什么只有a > h1生效。

下面是几种快速实现的方法：

• 方法一：使用CSS原生:is()选择器（推荐）
  现代浏览器都支持这个选择器，它可以帮你把多个子元素选择器打包，只需要写一次a >前缀，后续加伪类也不用重复编写所有选择器：

  /* 基础样式 */
  a > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6) {
    font-weight: var(--medium);
  }
  
  /* hover状态样式 */
  a > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6):hover {
    /* 自定义hover样式，比如 color: #f00; */
  }
  
  /* active状态样式 */
  a > :is(h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6):active {
    /* 自定义active样式，比如 opacity: 0.8; */
  }
  

• 方法二：用CSS预处理器简化（如Sass/LESS）
  如果你项目中使用预处理器，可以先定义一个变量存储所有目标元素，后续直接复用，编译后会自动展开成完整选择器：

  // 定义目标元素列表
  $target-elements: h1, h2, h3, h4, h5, h6, strong, b, d1, d2, d3, d4, d5, d6;
  
  // 基础样式
  a > #{$target-elements} {
    font-weight: var(--medium);
  }
  
  // hover状态
  a > #{$target-elements}:hover {
    /* 你的hover样式 */
  }
  
  // active状态
  a > #{$target-elements}:active {
    /* 你的active样式 */
  }
  

• 方法三：兼容老旧浏览器的原生写法
  如果你必须兼容IE这类不支持:is()的浏览器，可以把选择器列表统一写一次，再通过复制粘贴复用（虽然不如前两种便捷，但比手动逐个编写高效）：

  /* 基础样式 */
  a > h1, a > h2, a > h3, a > h4, a > h5, a > h6,
  a > strong, a > b, a > d1, a > d2, a > d3, a > d4, a > d5, a > d6 {
    font-weight: var(--medium);
  }
  
  /* hover状态 */
  a > h1:hover, a > h2:hover, a > h3:hover, a > h4:hover, a > h5:hover, a > h6:hover,
  a > strong:hover, a > b:hover, a > d1:hover, a > d2:hover, a > d3:hover, a > d4:hover, a > d5:hover, a > d6:hover {
    /* 你的hover样式 */
  }
  

内容的提问来源于stack exchange，提问作者Mohammed H.