CSS：无法重写继承的文本装饰属性 [英] CSS: Could not override inherited text-decoration property

问题描述

我将为我的菜单使用此类CSS表格：

  .menu {text-decoration：underline;} 
 .menu a：link {text-decoration：none;颜色：＃0202C0} 
。菜单a：active {text-decoration：none;颜色：＃0202C0} 
。菜单a：visited {text-decoration：none;颜色：＃0202C0} 
。菜单a：hover {text-decoration：underline; color：＃0099FF} 
  

，但尝试将其应用到文档

 < span class =menu> 
一些带下划线的文字来自这里... 
< a href =...>此文本在鼠标开始之前不应带下划线！< / a> 
< / span> 
  

我发现意外的行为：链接文本总是保持下划线。我做错了什么？它可以取决于浏览器（我使用Mozilla Firefox 3.5.6，可能IE 6.0显示它正确）？如果是这样，我怎么能依靠CSS？

（事实上，我通常很快就学会了新的编程语言，直到我开始使用HTML和CSS之前，编程基础没有任何问题。 ）

解决方案

使用一些CSS快速播放之后，一个解决方法（这是 horrid ，但工作）将是在您的CSS中执行以下操作：

  .menu span {text-decoration：underline;} 
  

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

 < span class =menu> 
< span>一些带下划线的文字来到这里...< / span> 
< a href =...>此文字不能带有下划线，直到鼠标！< / a> 
< span>下面有一些下划线文字...< / span> 
< / span> 
  

这不是完美的，但是我现在可以想出的最好的。 p>

I'm going to use such CSS table for my menu:

.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}

but while trying to apply it to the document

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

I found unexpected behavior: link text always stay underlined. What I'm doing wrong? Could it depends on browser (I'm using Mozilla Firefox 3.5.6, probably IE 6.0 display it properly)? If so, how can I rely CSS at all? What should I use to substitute it?

(In fact usually I got learned new programming languages very quickly and never had any problems with programing basis until I started HTML and CSS. Either I'm incompatible with it or its features was never recounted well enough.)

解决方案

After a quick play with some CSS, a workaround (which is horrid, but does work) would be to do the following in your CSS:

.menu span {text-decoration:underline;}

... in place of the first line of your sample CSS. Then in the HTML do the following:

<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>

It's far from being perfect, but is the best I can come up with for the moment.

这篇关于CSS：无法重写继承的文本装饰属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！