Question

说你有这个HTML：

<a href="#">
    This is underlined
    <span>
        This isn't.
    </span>
</a>

这个css：

a:hover {
    text-decoration: underline; /* I know, this is enabled by default. */
}

a:hover span {
    text-decoration: none !important;
}

为什么a＆gt; span元素仍有下划线。我很确定你应该通过使用'none'来取消装饰。我知道你可以通过使用它来实现我想要的结果：

<a href="#">
    <span class="underlined">
        This is underlined
    </span>
    <span>
        This isn't.
    </span>
</a>

加上这个css：

a:hover {
    text-decoration: none;
}

a:hover span.underlined {
    text-decoration: underline;
}

但是......这对我来说没有意义，为什么你不能取消子元素的文本修饰。那么，为什么......？

编辑：内嵌块

根据@amosrivera，当你使用内联块时，它确实有效。我可以确认这可以在Safari和Chrome中使用！

a:hover span{
    text-decoration:none;
    display:inline-block;
}

如前所述，这适用于Safari和Chrome，但不适用于Firefox。以下解决方案适用于Firefox，但不适用于Safari和Chrome ...

a:hover span{
    text-decoration:none;
    display:block;
}

小桌子：

    CSS-Rule            |    Webkit    |    Firefox    |    Opera    |    IE    
--------------------------------------------------------------------------------
display: block;         |       x      |               |      ?      |     ?    
display: inline-block;  |              |       x       |      ?      |     ?

Answer 1

这与span是内联元素的事实有关。试试这个：

a span{
    text-decoration:none;
    display:inline-block;
}

在线演示： http://jsfiddle.net/yffXp/

<强>更新

在FF（4？）中，只有 display：block 有效（在webkit中同时没有），会导致换行。

更新2 （黑客？）

a span{
    display:inline-block;
    background:#fff;
    line-height:1.1em;
}

在边框上覆盖白色背景并不漂亮，但它似乎做到了。它适用于IE 6,7

以外的所有浏览器

在线演示： http://jsfiddle.net/yffXp/6/

Answer 2

可能会有一些令人难以置信的跨浏览器方式来实现它，但为了理智起见，我会选择这个（你问题中的解决方案的变体）：

它只是有效：http://jsfiddle.net/KrepM/1/

<强> HTML：

<a href="#">
    <span>This is underlined</span>
    This isn't.
</a>

<强> CSS：

a:hover {
    text-decoration: none
}

a:hover span {
    text-decoration: underline
}

Answer 3

作为一个解决方案，我会使用@ thirtydot的一个，但就问题而言，我认为你是以错误的方式看待它。

检查以下fiddle：正如您所见，未装饰的部分未使用给定的颜色进行装饰;你看到的是它的父颜色延伸到元素的末尾（因为a中的空格也加下划线）。所以浏览器实际上正在做你要告诉它的事情，你只是看不到它。

作为参考，将之前的小提琴与this one进行比较。并猜测当您将span的颜色更改为background colour ...

时会发生什么

Answer 4

我今天遇到了这个问题，但对于伪元素，这相当于同样的情况，我能够找到解决方案。在子元素上设置overflow:hidden;。然后将子元素的高度设置为略小于链接其余部分的高度。你必须使用高度几次来使它恰到好处，但最终你应该能够使下划线消失。

Answer 5

当我使用班级作为我的链接时，抓住了这个问题。

<a href="#close" class="close">&times;</a>

如果我在我的css chrome和safari中使用.close一直强调链接。当我在课名前添加标签时，一切都开始正常。

a {
    text-decoration: none;
}
a.close {
    color: black;
}

无法撤消子元素的文本修饰

5 个答案: