a，你真的玩会了么？

　　a，小块头有大智慧。闲话不说，先上图：

　　 （图一）

　　如上图3个链接效果，本来只想说第3个的，另外2个是用来做对比滴。

　　假设图一的3个链接有固定的HTML结构，如下：

　　<p class="test"><a href="#">这是<span>传说</span>中的测试</a></p>

　　链接本身就带有下划线，这是a的特质。所以对于链接1，如果a的下划线被reset掉了的话，那么要还原的话，只需：

代码1：

　　.test a{color:#000;text-decoration:underline;}
　　.test a span{color:#f00;}

　　这个基本上没什么好说的，接着来看链接2。似乎也只是简单的下划线而已，于是也按处理链接1的方法来处理。结果，在你的意料之中，下划线颜色不合要求，我们要红色而不是黑色。

　　一个方法没有奏效，接着向另外一个办法，总之只是要一条红色的下划线而已。线，是的，很快你就会想起border，玩线还是它比较“专业”。

　　于是我们开始用border来测试：

代码2：

　　.test a{color:#000;border-bottom:1px solid #f00;}
　　.test a span{color:#f00;}

　　很明显，你是对的，我们想要的红色下划线出现了。但也有让你郁闷的事，那就是在红色的下划线之上还有一条黑色的下划线。如图二所示。

　　（图二）

　　别急，别骂它，因为这是我们忘了清除a自身的下划线。来吧，让我们把它搞定：

代码3：

　　.test a{color:#000;border-bottom:1px solid #f00;text-decoration:none;}
　　.test a span{color:#f00;}

　　弄了这2个东西，基本上知道要下划线要么找border-botom要么找text-decoration:underline，不同的是border-bottom的颜色我想怎么换就怎么换，而text-decoration:underline则没那么自由，它始终摆脱不了它老爹的color。比如说a定义为红色，那么text-decoration:underline也只会乖乖的显示为红色。

　　请把眼睛往链接3上挪移挪，会发现这是完全不同于上面2个链接的效果。效果很简单，但到底该如何来写，你会怎样做呢？

　　对于这个效果我问了问旁人，想了解下其他人是怎么做的。他想都没想（这是我猜滴^_^），就给了我“代码1”。至于是谁，就不点名了哈，自己心里有数。@@

　　我提出问题后，他马上改了一下，变成了：

代码4：

　　.test a{color:#000;border-bottom:1px solid #000;text-decoration:none;}
　　.test a span{color:#f00;border-bottom:1px solid #f00;}

　　哦，神啊，在非IE下，果然达到了效果，不过在IE中却只能显示为图三的样子：

　　（图三）

　　他说，这简单，于是又给改成了：

代码5：

　　.test a{color:#000;border-bottom:1px solid #000;text-decoration:none;}
　　.test a span{#margin-bottom:-1px;color:#f00;border-bottom:1px solid #f00;}

　　用到了hack，自然不是理想的答案，于是我对他说，其实你走弯路了，可以不用这么复杂的。看代码6：

代码6：

　　.test a{color:#000;text-decoration:underline;}
　　.test a span{color:#f00;text-decoration:underline;}

　　电脑前的你又会怎样做呢？