如何简化鼠标悬停时选中所有链接元素的CSS代码？

简化悬停选择器的方案 #

你之前用的*a:hover和* + a:hover都是错误用法：

• *a:hover属于语法错误，CSS里不存在这种写法；
• * + a:hover是相邻兄弟选择器，只会选中紧跟在任意元素之后的a标签，无法覆盖所有链接。

如果要选中页面上所有链接的hover状态，直接用a:hover就足够了，这是最简洁的全局链接悬停选择器。

结合你原来的代码，因为还有非链接元素（比如.menu-icon、标题标签等）也需要hover时变色，可以把链接和其他元素分开写，让代码更清晰：

/* 所有链接的hover效果 */
a:hover {
  color: #e00;
}

/* 其他需要hover变色的非链接元素 */
.menu-icon:hover,
.source-icon:hover,
.title h1:hover,
.title h2:hover, 
.list-title h1:hover,
.list-title h2:hover,
.button:hover,
.pagination .prev:hover,
.pagination .next:hover,
.copyright:hover {
  fill: #e00;
  color: #e00;
}

补充说明：a标签本身不需要设置fill属性（除非是嵌套在SVG里的特殊链接，这种场景极少），所以单独给a:hover设置color即可；而像.menu-icon这类可能是SVG图标的元素，才需要同时设置fill和color。

如果某些链接是特殊容器内的，不想全局生效，也可以用a[href]:hover（选中所有带href属性的链接）来做精准匹配，但一般场景下a:hover就够用。

内容的提问来源于stack exchange，提问作者AngoraSpace