覆盖特定div的链接下划线

Question

我在<div>内有一个<a>，我不想加下划线。

HTML：

<a href="/joomla17/contact">
  <div class="button">nous contacter</div>
</a>

通用a规则在其他地方定义。

我用css尝试了这个：

.button {
    text-decoration: none;
}

但仍有下划线。与Firebug一起检查text-decoration: none未被覆盖。

我觉得我必须指定a:link，但我不知道如何让它与我的班级相匹配

Answer 1

由于div与display: inline;一起使用，因此默认情况下a是内联元素，因此没有必要。那么为什么要将内联容器放在内联元素中呢？

<a class="button" href="/joomla17/contact">nous contacter</a>

但也许你有一些特殊的原因，所以这可能是div的解决方案。由于div位于a内，因此它继承了a的属性，所以通常它也应该继承下划线的内容。但也许你需要明确地在div上设置它。

.button, .button div { text-decoration:none; }

也许您需要在!important前添加;，具体取决于广告的复杂程度。

Answer 2

尝试

.button{text-decoration:none !important;}

以避免您的样式被以下任何规则覆盖。

如果你想在你的a元素上使用伪类，它将如下所示：

a:link{/* ... */} 
a:active{/* ... */} 
a:hover{/* ... */}
a:visited{/* ... */}

如果您想在链接具有特定状态时访问div，请使用

a:hover .button{/* ... */}

例如

。