如何让CSS hover样式仅作用于含超链接的<a>标签？

a[href]:hover {
  color: #2563eb; /* 示例：hover时变蓝色 */
  text-decoration: underline;
}

<!-- 超链接标签 -->
<a href="/about" class="hyper-link">关于我们</a>
<!-- 仅作为锚点的标签 -->
<a id="section1">第一部分</a>

a.hyper-link:hover {
  /* 你的hover样式 */
}

这种方式可读性和维护性更强，后续修改样式也更方便。

/* 重置无href的<a>的hover样式，等同于不生效 */
a:not([href]):hover {
  color: inherit; /* 继承父元素颜色，取消hover变色 */
  text-decoration: none; /* 取消hover下划线 */
}

不过这种方式不如第一种直接，一般更推荐用属性选择器直接定位目标元素。