如何使用CSS为同一页面的链接设置不同颜色？

你的CSS代码逻辑是对的，先给你简化写法减少重复（功能和原代码完全一致）：

/* 红色链接样式 */
a.class1:link,
a.class1:visited,
a.class1:active {
  color: red;
  text-decoration: none;
}
a.class1:hover {
  color: red;
  text-decoration: underline;
}

/* 蓝色链接样式 */
a.class2:link,
a.class2:visited,
a.class2:active {
  color: blue;
  text-decoration: none;
}
a.class2:hover {
  color: blue;
  text-decoration: underline;
}

接下来重点说怎么在WordPress图标列表小工具里给链接加上这些类：

• 进入WordPress后台，找到你正在编辑的图标列表小工具
• 如果小工具自带自定义类输入框：
  部分图标列表小工具会在单个链接的设置项里提供「CSS类」输入框，直接输入class1或class2即可（不用加前面的.）
• 如果小工具没有类输入框，切换到HTML模式编辑：
  找到小工具的「文本/HTML」切换按钮，切换后找到对应链接的代码，修改成如下格式：

  <a href="你的目标链接地址" class="class1">链接显示文本</a>
  

  要蓝色链接就把class1换成class2
• 保存小工具设置，刷新前端页面就能看到不同颜色的链接效果

额外注意：

• 确保你的CSS代码已经正确添加到WordPress的「外观→自定义→额外CSS」区域，或者主题的自定义CSS文件中
• 如果样式不生效，检查是否有其他CSS规则优先级更高，可以给选择器增加权重，比如改成.widget-icon-list a.class1（具体类名根据你的小工具实际情况调整）

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