打开任何一个网页，标必须右键查看源代码，样式用搜索“你大概率会看到类似这样的标必须东西：<a href="https://example.com" style="color: red; text-decoration: none;">点击这里</a>。能跑，样式用浏览器也认。控制但这就是标必须问题的开始。

我见过太多项目里，样式用a标签的控制样式像野草一样长在HTML里。一个导航栏，标必须十几个链接，样式用每个都挂着style="color: #333; font-size: 14px;"。控制改一次品牌色，标必须你得打开十几个文件，样式用用查找替换小心翼翼地操作，控制生怕漏掉一个或者误伤别的。这不是开发，这是体力活。

HTML管的是结构，CSS管的是表现。这个分工说了二十年，但很多人就是不当回事。a标签尤其容易被当成特例——因为它默认带蓝色和下划线，很多人第一反应就是“我直接改掉它”。改是没问题，改在哪里才是关键。

那个style属性，到底碍着谁了

行内样式（inline style）的优先级高得离谱。你后面写再多CSS选择器，只要没加!important，统统被它压死。这意味着什么？意味着你的样式表变成了摆设。哪天想给所有链接加个hover效果，发现行内样式根本不给你机会。你只能一个个去HTML里删，或者更糟——加!important，然后陷入优先级战争的泥潭。

我接手过一个外包项目，首页四十多个a标签，每个都有行内样式。客户要改链接颜色，从#0066cc改成#0055aa。听起来简单吧？我花了四十分钟，因为有些链接在JavaScript动态生成的模板字符串里，有些在PHP的echo里，还有些藏在富文本编辑器吐出来的脏HTML里。如果这些样式从一开始就写在CSS文件里，改一行就够了。

用CSS控制a标签，不只是“更优雅”

伪类。这是a标签最特别的地方。:link、:visited、:hover、:active，四个状态，浏览器原生支持。你不用CSS，怎么控制鼠标悬停时的颜色变化？行内样式写不了伪类。你只能上JavaScript监听mouseenter和mouseleave，然后手动改style。为了一个颜色变化，引入事件监听，值吗？

还有继承和层叠。给父容器加一个color，里面所有a标签自动跟着变。这种联动在行内样式下完全失效。你写<a style="color: inherit;">？可以，但每个都要写。而CSS里一句.nav a { color: inherit; }就搞定全部。

/* 这样写，所有状态都照顾到了 */ .nav-link {  color: #333; text-decoration: none; transition: color 0.2s; } .nav-link:hover {  color: #0066cc; } .nav-link:visited {  color: #666; }

三行选择器，顶得上几十个行内style属性，而且维护成本几乎为零。

有人会说“我就一个小页面，无所谓”

我承认，一个只有三个链接的静态页面，行内样式确实能跑。但“小页面”会长大。今天加一个链接，明天加一个按钮，后天产品说“所有链接加个下划线动画”。你当初省下的那几分钟，后面要加倍还回来。更别说团队协作——你写行内样式，同事的CSS文件里又定义了一遍，两个颜色打架，调试半小时才发现是优先级问题。

还有个细节：行内样式让HTML体积膨胀。一个a标签多写50个字符，一百个链接就是5000字符。gzip能压掉一些，但为什么不从一开始就把它压掉呢？CSS文件可以被缓存，行内样式每次请求都跟着HTML走。流量不要钱吗？

那到底该怎么写

给a标签一个类名，或者用语义化的父级选择器。导航里的链接用.nav a，文章正文里的用.content a，按钮样式的用.btn。全局重置可以写a { color: inherit; text-decoration: none; }，但别在HTML里写style=""。

特殊情况？比如邮件模板。邮件客户端对<style>标签的支持参差不齐，Gmail会剥掉head里的样式。这种情况下行内样式确实是无奈之举。但那是邮件，不是网页。网页没有这个限制。

我现在的习惯是：写a标签的时候，手放到键盘上准备敲style=，就强迫自己停下来。打开CSS文件，加一个选择器。多花十秒钟，省下未来十小时的折腾。这笔账，怎么算都划算。

(责任编辑：百科)