在蓝色链接中显示红色的下划线

在蓝色带链接的文字里为了突出某个词,需要使用红色显示,同时要求这个词的下划线也是红色的。

以前的实现方法:

<!–body{font-size:14px;} a:link,a:visited {color:#0000FF; text-decoration:underline} a:hover{color:#FB4402; text-decoration:underline} –>
<a href=”#”>看今年<span style=”color: red;”>高考作文题</span>之偏,叹当今莘莘学子之苦</a>

现在流行样式和内容分离嘛,要抛弃font标签。所以重新写了一下:

<!– body{font-size:14px;} a:link,a:visited {color:#0000FF; text-decoration:underline} a:hover{color:#0000FF; text-decoration:underline} .key{color:#fb4402;} –><a href=”#”>看今年<span>高考作文题</span>之偏,叹当今莘莘学子之苦</a>

这样出来后,红字的下划线是蓝色的…

一时之间没有想出原因,去CSSER求助,得到BC的指点。

underline的颜色是跟color一样的,keywod的下划线继承了上一级color的颜色。

现在给keyword增加下划线的定义,keykord的下划线就跟随自身color的颜色。

<code><!– body{font-size:14px;} a:link,a:visited {color:#0000FF; text-decoration:underline} a:hover{color:#0000FF; text-decoration:underline} .key{color:#fb4402;text-decoration:underline} –>
<a href=”#”>看今年<span>高考</span>作文题之偏,叹当今莘莘学子之苦</a> </code>