相关疑难解决方法(0)

说你有这个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> 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    | …

可能重复:
如何使CSS文本修饰覆盖工作？

看看这个简单的例子:

<a href="#"> A <span>red</span> anchor </a>

a {
    color:blue;
    font-family:Times New Roman;
    text-decoration:underline; 
}

span {
    color:red;
    font-family:Arial;
    text-decoration:none;   
}

现场演示: http : //jsfiddle.net/5t9sV/

正如你在上的jsfiddle的演示中看到,SPAN元素覆盖color和font-family它的祖先定位元素的属性值.但是,由于text-decoration某种原因,该物业不会被覆盖.

我假设一些CSS属性可以被祖先元素覆盖,而其他一些CSS属性则不能.

是这样吗？如果是,我怎么知道哪些可以被覆盖？

有人知道是否可以防止标签的子项下划线,同时强调标签内容的其余部分？

这是一个例子 - 你可以在JSFiddle上看到这个.我已经尝试了所有我能想到的内容,但文本下划线仍然适用于链接中的所有文本.我在Chrome上查看,但我确信这适用于所有浏览器.

a {
    font-size: 32px;           
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a div {
    color: pink;
}

a:hover div,
a:active div,
a:focus div {
    text-decoration: none !important;
}?

<a href="http://news.bbc.co.uk">
<div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.
</a>?