CSS:无法覆盖继承的文本修饰属性

Question

我将在我的菜单中使用这样的CSS表格:

.menu {text-decoration:underline;}
.menu a:link {text-decoration:none; color:#0202C0}
.menu a:active {text-decoration:none; color:#0202C0}
.menu a:visited {text-decoration:none; color:#0202C0}
.menu a:hover {text-decoration:underline; color:#0099FF}

但在尝试将其应用于文档时

<span class="menu">
   Some underlined text came here... 
   <a href="...">this text should not be underlined until mouse on!</a>
</span>

我发现了意外的行为:链接文本总是保持下划线.我做错了什么？它可能取决于浏览器(我使用的是Mozilla Firefox 3.5.6,可能是IE 6.0正确显示)？如果是这样,我怎么能依赖CSS呢？我应该用什么来替代它？

(事实上​​,通常我很快就学会了新的编程语言,并且在编写基础之前从未遇到任何问题,直到我开始使用HTML和CSS.要么我与它不兼容,要么它的功能从未得到足够好的回忆.)

Answer 1

快速使用了一些 CSS 后，一个解决方法（虽然很糟糕，但确实有效）是在 CSS 中执行以下操作：

.menu span {text-decoration:underline;}

...代替示例 CSS 的第一行。然后在 HTML 中执行以下操作：

<span class="menu">
    <span>Some underlined text came here...</span>
    <a href="...">this text should not be underlined until mouse on!</a>
    <span>Some more underlined text came here...</span>
</span>

它远非完美，但却是我目前能想到的最好的。