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快速播放后，解决方法（ horrid ，但确实有效）将在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>

它远非完美，但是我现在能想到的最好。

Answer 2

确保它是href内的有效链接。如果你不提供这种风格：

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

并且href没有内容，某些浏览器不会将其视为链接并执行默认文本呈现。例如，<a href="">不会采用.menu a:link的样式，它将转到默认的.menu样式，因为没有链接，并且某些浏览器不会这样做。

当然，通过在选择器中添加裸a来覆盖您的基地。

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

Answer 3

您是否尝试过添加：

.menu a {text-decoration:none}

在所有其他规则之前？只是建立一个默认值，然后由a:hover规则覆盖。

Answer 4

要为要加下划线的文本添加<u>blabla</u>（以HTML方式执行）。这不会继承，你的下一个链接也不会出现下划线。

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

4 个答案: