Html CSS:无法重写继承的文本装饰属性

我将在我的菜单中使用这样的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之前，我在编程基础上从来没有遇到过任何问题。要么我与HTML和CSS不兼容，要么它的功能从未被很好地描述过。）

您是否尝试过添加：

.menu a {text-decoration:none}

---

在所有其他规则之前？只需建立一个默认值，然后由

a:hover

规则覆盖。

确保它是href中的有效链接。如果不提供此样式：

.menu a, .menu a:link{my styles}

而且

href

没有内容，一些浏览器不会将其视为链接并进行默认文本呈现。例如，

将不会采用

.menu a:link

的样式，它将转到默认的

.menu

样式，因为没有链接，并且某些浏览器不会将其呈现为这种样式

当然，通过在选择器中包含裸露的

a

来覆盖基础

---

此外，确保使用分号结束这些颜色样式，以获得正确的CSS语法。

在快速使用一些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>

一些带下划线的文字出现在这里。。。
这里还有一些带下划线的文字。。。

---

这还远远不够完美，但这是目前我能想到的最好的方法。

对于要加下划线的文本，请使用

blabla

（使用HTML方式）。

---

这不会继承，您的下一个链接也不会带下划线

删除

。菜单{文本装饰：下划线}

。别担心，不是你：CSS是一个残忍的情妇。快速播放一下，就会发现这可能是Firefox的一个古怪之处。当然，在我这里唯一的其他浏览器（IE6！）中，您的代码正如您所期望的那样。此外，Firebug建议，根据FirefoxDOM，链接有“文本装饰：无”，这在视觉上不是这样的。。。但它显示了浏览器不兼容的一个特别（非常）大的问题。。。Sp的问题变成：“我应该如何调试我的网站，以便在包括我的浏览器在内的大多数浏览器上都能正常观看？”哈哈。实际上，再想想，你可能会发现链接确实没有下划线。。。但它周围的整个跨度都是，因此链接看起来有下划线。例如，如果在跨距周围放置边框，但在链接周围没有边框，则跨距的边框也会展开以包围链接。这也许可以解释你所看到的。在这种情况下，你需要找到一些其他的解决方案，如我下面的建议。它有适当的链接内。。。即使没有任何链接，我的Firefox仍然正确应用颜色并在鼠标打开时更改颜色，只有下划线无法删除。您是否在文档的其他位置应用下划线？也许它是从其他东西继承的，并且.menu和.menu a不足以覆盖它。谷歌CSS专一性，以进一步了解-很好的教程在这里哦，不，我没有强调任何其他东西，我清理的例子完全一样，你看到的问题。你是对的，我从来没有见过这个。这也发生在IE中。icabod的解决方案可能是您的最佳选择。如果我有更好的名声，我会+1你的问题，这太疯狂了@非常感谢您提供CSS-TRICKS文章的链接。。。这刚刚解决了我一大堆恼人的问题，在其他情况下试试这个怎么样？在菜单span中添加一个

，然后尝试

。菜单span{text-decoration:none；}

。如果这不起作用，可能会有更大的问题。这很奇怪。它应该会起作用。你确定没有其他css规则干扰吗？我试过了，如果在.menu span with.menu span{text decoration:none}中，它就起作用了。menu span{text decoration:none}我用{text decoration:underline}将其他文本放入内部span。谢谢你，事实上我也这么认为。。。我只是想知道如何覆盖继承财产。是的，非常感谢，正如我之前在回答Ipsquiggle对slebetman回答的评论时所说的那样。这是解决方案，但它是局部的，这种奇怪的行为随时可能发生。寓意：在html格式中，永远不要将对默认值和强调文本的理解与标准含义互换。这不是LOL。我刚刚发布的答案上没有显示，但我的观点是，你应该在文本周围用字母“u”划线。有时使用HTML代替CSS