如何修改多个<a>标签颜色，解决.contact类链接样式覆盖问题

问题核心原因 #

• 你遇到的是CSS选择器优先级和伪类匹配范围的双重问题：
  1. .row a 是类选择器+标签选择器，优先级为11，你最初的a.contact:link优先级不足，同时该选择器只能匹配带contact类的<a>标签，你最开始的<a>写在class="contact"的容器内，本身没有类，所以匹配失效。
  2. 你后续给<a>加上contact类后依旧失效，是因为你只设置了:link伪类的样式，该伪类仅匹配从未被访问过的链接。tel、mailto这类功能性链接多数浏览器会默认判定为已访问状态，触发:visited伪类，你没有设置该状态的样式，就会被优先级更高的.row a的白色覆盖。
  3. hover能正常生效是因为伪类优先级更高，且你单独做了设置。

解决方案 #

方案1：给链接加contact类的场景（你最后尝试的HTML写法可用） #

直接提升选择器优先级，同时覆盖未访问、已访问两种状态：

.row a {
  color: white;
  text-decoration: none;
}

/* 同时匹配未访问、已访问的contact类链接 */
.row a.contact:link,
.row a.contact:visited {
  color: red;
}

.row a.contact:hover {
  color: green;
}

对应的HTML无需修改，保留你给<a>加class="contact"的写法即可。

方案2：无需给链接单独加类的场景 #

如果你所有需要改色的链接都放在class="contact"的容器内，可以直接通过父容器匹配，不用给每个<a>加类：

.row a {
  color: white;
  text-decoration: none;
}

/* 匹配contact容器内的所有链接 */
.row .contact a:link,
.row .contact a:visited {
  color: red;
}

.row .contact a:hover {
  color: green;
}

对应的HTML用你最开始的写法即可，不需要给<a>加contact类。

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