共计 1568 个字符，预计需要花费 4 分钟才能阅读完成。
a 标签 有 link, visited, hover, active 这几个常用的 伪类 用于定义不同状态. 这些伪类意思明确, 使用简单, 看起来不会存在什么问题, 而实际上他们的使用顺序, 是否应该使用都需要考虑清楚.
a 标签在网页中无所不在, 而且 样式 复用性很高. 一般来说, 一个网站上的链接形式是比较统一的, 所以作为 reset 或者基本的 a 标签 css 定义十分重要.
a 标签伪类的 lvha 顺序
为了解决伪类状态覆盖的问题, 网上建议开发者书写 a 标签样式如下:
a:link {color:#ff0000;}/* 没访问过的链接样式 */
a:visited {color:#00ff00;}/* 访问过的链接样式 */
a:hover {color:#ff00ff;}/* 鼠标进入链接区域的链接样式 */
a:active {color:#0000ff;}/* 点击链接时的链接样式 */相信很多开发者都看了这段称为 lvha (love & hate) 的书写顺序建议, 我看了很多网站在全站通用的 css 里已经也是这么写的. 除了样式上有特殊需要, 我不建议这样来定义 a 链接的样式, 尤其是在通用样式中.
a 标签 lvha 存在的问题
lvha 的写法从逻辑上没有问题, 而事实上这种写法是过度设计, 为代码维护带来很多额外的维护成本.
假设全局通用 css 中已经按 lvha 定义样式, 而页面中一些链接即便被访问过, 要求跟没访问过的样式一致, 开发便需要重写 visited 样式; 如果某些链接颜色跟通用样式不一样, 基本上要重写所有链接伪类的样式, 代码量大, 也相当麻烦.
下面是一段过度设计的示例代码摘要.
a:link{color:#06c;text-decoration:none;}
a:visited{color:#969;text-decotation:none;}
a:hover{color:#f90;text-decoration:underline;}
.normal a:link,.normal a:visited{color:#666;}.normal a:hover{color:#000;}有什么问题相信大家看看就知道了, 几乎所有对链接的重新定义, 都需要将 a 链接对应的个伪类的样式重写一遍.
a 标签样式规划建议
为什么会出现上述的写法? 我猜这是因为设计库中存在一套对文本和链接的完整的设计规范, 编写代码的人认为可以通过通用的样式一劳永逸, 而这可能弄巧反拙. 下面是 alibaba dpl 的一个片段, 一看便知.
link 和 hover 状态的链接样式通用性很高, 但 visited 样式仅在搜索页面的商品标题, 帮助中心的问题链接等少部分列表的主要链接上才会使用. 所以完全有理由将它们分开处理.
在通用 css 中只定义 a 和 a:hover 样式, 需要使用 a:visited 样式时再做定义. 则前面那段 css 可以定义如下:
a{color:#06c;text-decoration:none;}
a:hover{color:#f90;text-decoration:underline;}
.normal a{color:#666;}.normal a:hover{color:#000;}
.list a:visied{color:#969;}从代码可以看到, 一般的链接样式修改, 只需要顾及到 a 和 a:hover, 而其他状态仅在使用的时候进行定义. 因为前者常有, 后者少用, 所以维护量是非常小的.
后话
过度设计无所不在, 三年前我刚入职写过一段商品价格的 css 定义, 对货币, 价钱, 单位以及各种场景都做了看起来完美的定义, 但现在看来这是我做的最错误的一件事情, 因为强定义导致样式覆盖的代码量大. 而随着网站的发展, 这些修改和重写必将越来越多.
当我们希望有一套 css 架构解决掉所有页面外观需求, 甚至出现如: size-35, margin-left-10 这样的 class, 过度设计就开始了 …