如何移除WordPress中链接的绿色高亮以实现自然样式？

为什么你的自定义CSS没生效？ #

你写的全局a选择器优先级不足，WordPress主题自带的CSS通常会用更具体的选择器（比如带类名、ID的.post-content a:focus这类），这些选择器优先级高于全局a，导致你的样式被覆盖了。

如何让自定义CSS生效？ #

提升选择器的精准度即可，比如：

• 针对单个页面：找到页面ID（可在WordPress后台页面编辑地址中看到post=xxx，xxx即为页面ID），编写如下样式：

body.page-id-xxx a,
body.page-id-xxx a:focus {
  color: inherit;
  border: none; /* 用none比inherit更直接，避免继承父元素边框 */
  outline: none;
  text-decoration: none;
}

• 针对特定区块：给需要修改样式的链接所在区块添加自定义类（比如在页面编辑器中给区块加custom-link-block类），再编写样式：

.custom-link-block a,
.custom-link-block a:focus {
  color: inherit;
  border: none;
  outline: none;
  text-decoration: none;
}

内联样式vs统一配置：哪个是最佳实践？ #

内联样式虽然能快速解决单个问题，但绝非最佳方案——后续修改样式时，你需要逐个查找页面中的内联代码，维护成本极高，还违反了CSS「样式与结构分离」的核心原则。

推荐使用统一配置，可二选一：

1. 全站通用样式：如果多数链接都需要无框样式，定义一个通用类（比如.plain-link），在自定义CSS中写入：

.plain-link,
.plain-link:focus {
  color: inherit;
  border: none;
  outline: none;
  text-decoration: none;
}

之后在WordPress添加链接时，给链接添上这个类即可。
2. 局部精准配置：如果仅特定页面/区块需要修改，就用前面提到的页面ID或区块类的方式，把样式写在子主题的style.css或WordPress自定义izer的「额外CSS」中，所有样式集中管理，修改更高效。

额外提醒：兼顾可访问性 #

直接去掉outline会影响键盘导航用户（比如用Tab键切换焦点的人群），他们无法定位当前选中的链接。如果想兼顾美观与可访问性，可以把outline替换成更友好的样式，比如：

.custom-link-block a:focus {
  outline: 2px solid #666; /* 使用与页面色调匹配的颜色 */
  outline-offset: 2px;
}

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