Question

我的CSS看起来像：

A:link { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:visited { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:active { text-decoration: none; color: White; border-bottom:1px dotted white; font-style:italic;}
A:hover { text-decoration: none; color: white; border-bottom:1px solid white; font-style:italic; }

#mainmenu A:link { text-decoration: none; }
#mainmenu A:visited { text-decoration: none; }
#mainmenu A:active { text-decoration: none; }
#mainmenu A:hover { text-decoration: underline; color: white; }

在HTML中我有：

<div id="mainmenu">
   <a href="link here">link</a>
</div>

我认为这个menuitem会有没有文字装饰的样式，而是获得带下划线的样式。所以#mainmenu的样式似乎被忽略了，它总是采用默认样式。

我错过了什么吗？

Answer 1

好奇，CSS区分大小写（至少有类名和标识符），据我所知，它也是“原生元素” - 但无论如何，你可以使用!important关键字覆盖样式：

#mainmenu a:link { text-decoration: none !important; }

Answer 2

这是你的代码

#mainmenu A:hover { text-decoration: underline; color: white;  }

A:hover { text-decoration: none; color: white; border-bottom:1px solid white; font-style:italic; }

您的#mainmenu正在设置下划线和颜色，因此如果您希望#mainmenu没有下划线，那么它就不会被忽略，那么您需要将代码更改为

#mainmenu A:hover { text-decoration: none; color: white; border: 0; }

A:hover { text-decoration: underline; color: white; border-bottom:1px solid white; font-style:italic; }

Answer 3

此http://jsfiddle.net/CU9RH/1/表明#mainmenu链接没有下划线，但底部有虚线边框。

如果您不希望它显示，则需要覆盖底部边框：

#mainmenu A:link { text-decoration: none; border-bottom:none;}
#mainmenu A:visited { text-decoration: none; border-bottom:none;}
#mainmenu A:active { text-decoration: none; border-bottom:none;}

带有修复的演示：http://jsfiddle.net/uYhtw/1/

覆盖链接样式

3 个答案: