相关疑难解决方法(0)

可能重复:
如何使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属性则不能.

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

我试图删除text-decoration:line-through;应用于我的元素的样式,我似乎无法这样做.我试过text-decoration:none;但它不起作用.

当我申请text-decoration:underline;时span,似乎不是替换line-through样式,浏览器添加underline样式.

我知道我总是可以重写我的HTML所以需要的元素line-through有自己的类.我想知道是否有其他选择,然后重组我的HTML.

http://jsfiddle.net/wshHW/

<style>
p { text-decoration:line-through; }
span { text-decoration:none; }
</style>

<p>Foo <span>bar</span></p>

我有一个标题链接,如下所示,

<a href="#">Cat<span class="more">See More</span></a>

你看我在里面是为了向右边流动"看到更多",所以我有以下css

.more {float:right;}
a{text-decoration:none;width:150px;display:block;}
a:hover {text-decoration:underline;}

我希望当我将鼠标悬停在文本"Cat"上时,"See More"会加下划线,但它在IE/Firefox中不起作用,但它可以在Chrome中使用.

http://jsfiddle.net/ZW9tt/1/

谁知道为什么？