代码之家  ›  专栏  ›  技术社区  ›  Nick

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

  •  7
  • Nick  · 技术社区  · 15 年前

    我将使用这样的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之前,编程基础从来没有遇到过任何问题。要么是我和它不兼容,要么是它的特点从未被充分描述过。)

    4 回复  |  直到 12 年前
        1
  •  2
  •   icabod    15 年前

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

    这远不是完美的,但却是我目前能想到的最好的。

        2
  •  1
  •   neatlysliced    15 年前

    请确保它是一个有效的链接内的Href。如果不提供此样式:

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

    以及 href 没有内容,某些浏览器不会将其视为链接并执行默认文本呈现。例如, <a href=""> 不会采取 .menu a:link ,它将转到默认值 .menu 样式,因为没有链接,而且某些浏览器不会按此方式呈现链接。

    当然,把你的基础包括在内 a 在你的选择器中。

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

        3
  •  0
  •   slebetman    15 年前

    您是否尝试添加:

    .menu a {text-decoration:none}
    

    在其他规则之前?只是为了建立一个默认值,然后由 a:hover 规则。

        4
  •  -1
  •   ЯegDwight kri    12 年前

    对于要加下划线的文本,使用 <u>blabla</u> (用html的方式)。 这不会继承,你的下一个链接也不会出现下划线。