最近在调整博客时，发现了一个很小却影响阅读体验的细节。
我的博客使用的是 WordPress 的 Twenty Twenty-Five 主题。默认情况下，正文中的链接和普通文字区别并不明显。
例如在一篇文章中，我引用了上一篇文章：
极简远程求职看板：PHP / Go 双栈后端的 10 个网站 + 5 个 TG 频道 + 2 个发现源
这段文字实际上已经添加了链接，但从页面上看，几乎无法一眼识别出来。
对于读者来说，如果链接没有明显样式，就很容易错过上下文关联文章。尤其是博客文章之间经常会互相引用，如果链接不可见，会影响阅读路径和站内浏览体验。
最开始的尝试
一开始，我考虑直接修改正文内容区域中的所有链接样式：
.entry-content a {
color: #503aa8;
text-decoration: none;
border-bottom: 1px solid rgba(80,58,168,.35);
}
.entry-content a:hover {
color: #3e2d84;
border-bottom-color: #503aa8;
}
这个方案确实可以让链接变得明显。
但是很快发现了一个问题：.entry-content a 的范围太大了。
它不仅会影响正文段落里的普通链接，也会影响文章内容区域中的其他组件链接，例如：
- 系列文章列表；
- 分类组件；
- 目录；
- 文章内嵌的其他区块；
- 一些 CTA 或推荐模块。
比如系列文章列表中的标题，鼠标移动上去后也会出现紫色下划线，视觉上就显得不太协调。
因此，这个方案不够精确。
最终方案
后来我将选择器范围缩小，只针对正文段落中的普通文本链接生效：
/* 仅正文段落中的普通链接 */
.entry-content p a {
color: #503aa8;
text-decoration: none;
transition: color .2s ease;
}
.entry-content p a:hover {
color: #3e2d84;
text-decoration: underline;
}
这个方案的关键点在于：
.entry-content p a
它只匹配文章正文段落中的链接。
也就是说，它主要影响类似这样的内容：
<p>
相比 V1 <a href="...">极简远程求职看板：PHP / Go 双栈后端的 10 个网站 + 5 个 TG 频道 + 2 个发现源</a>，每天频繁刷新招聘网站并没有带来更多合适的机会。
</p>
而不会影响系列文章列表、分类模块、导航菜单等组件。
最终效果
修改之后，正文链接在正常阅读状态下会显示为紫色：
这样读者一眼就能看出这是一段可点击内容。
鼠标移动到链接上时，颜色会稍微变深，并显示下划线：
这个效果比较克制，不会破坏正文排版，也符合大多数用户对链接交互的习惯认知。
为什么使用 #503aa8？
这里使用的 #503aa8 并不是随便选择的颜色。
我的博客使用的是 Twenty Twenty-Five 主题，而 #503aa8 正是主题编辑器调色板中的 强调色 3。
目前我已经在多个地方复用了这个颜色，例如：
- 日历中有文章发布的日期；
- 正文中的引用链接；
- 其他需要突出但不希望过于醒目的元素。
这样做的好处是，网站不会出现太多零散的颜色，整体视觉会更加统一。
关于 CSS 变量
从长期维护角度看，更理想的做法是使用主题提供的 CSS 变量，而不是直接写死颜色值。
例如：
.entry-content p a {
color: var(--wp--preset--color--accent-3);
}
这样如果以后在主题编辑器中修改了「强调色 3」，所有引用这个变量的地方都会自动同步更新。
不过我目前博客中已经存在大量额外 CSS，暂时还没有统一改造成变量的计划。因此这次仍然先使用具体颜色值：
#503aa8
后续如果对全站额外 CSS 做统一整理，再考虑将这些颜色值逐步替换为主题变量。
最终保留的 CSS
这次最终保留的代码如下：
/* 仅正文段落中的普通链接 */
.entry-content p a {
color: #503aa8;
text-decoration: none;
transition: color .2s ease;
}
.entry-content p a:hover {
color: #3e2d84;
text-decoration: underline;
}
总结
这次调整虽然只是几行 CSS，但解决了一个很实际的问题：
正文链接需要能够被读者识别出来，但又不能影响系列列表、分类模块、导航菜单等其他组件。
最终方案是只针对正文段落中的普通链接做样式增强。
这样既提升了正文阅读体验，也避免了全局 CSS 影响范围过大的问题。
对于 WordPress 主题样式调整来说，这也是一个很重要的原则：
CSS 选择器宁可写得精确一点，也不要为了省事直接影响整个内容区域。
尤其是在 Twenty Twenty-Five 这类区块主题中，文章内容区域里可能包含很多不同类型的区块和组件。如果选择器写得太宽，很容易在一个地方解决问题，却在另一个地方制造新的样式问题。
技术博客运营与商业化咨询服务
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、性能优化、多语言运营、Google SEO 以及广告变现等方向。所有经验均来自真实网站运营过程中的持续实践与验证。如果你正在运营个人博客、技术网站或独立开发者项目，希望获得更多自然流量并探索网站商业化路径，欢迎联系我交流。
适合以下用户：
✅ 技术博客运营者
✅ 独立开发者与个人站长
✅ SaaS 产品官网运营团队
✅ 希望拓展海外流量的网站运营者
✅ 希望通过网站获得收入的内容创作者
服务内容：
✅ WordPress 性能优化
✅ SEO 优化咨询
✅ 多语言网站建设
✅ 广告收益优化
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：博客运营咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com
发表回复