相关疑难解决方法(0)

我有一组使用:before箭头的样式链接.

它在所有浏览器中看起来都不错,但是当我将下划线应用于链接时,我不希望在该:before部分(箭头)上加下划线.

请参阅jsfiddle例如:http://jsfiddle.net/r42e5/1/

可以删除吗？我坐的测试风格#test p a:hover:before确实适用(根据Firebug),但下划线仍然存在.

有什么办法可以避免这个吗

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "? ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

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

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

是否可以通过CSS 将a : pseudo元素添加到A html标记而不显示伪元素的下划线文本修饰？

在下面的标记中,在链接的左侧添加了一个"+"符号,它在鼠标上正确加下划线,但即使css规则设置为"h3 a:before:",伪符号"+"也加下划线.悬停{text-decoration:none;}"

<style>
h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ content: '+'; margin:0; padding: 4px; }
h3 a:hover:before{ text-decoration:none; }
</style>

<h3>My Title <a href="#">link</a></h3>