html - 覆盖特定 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 , 但我不知道如何让它与我的类(class)相匹配

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，这取决于你布局的复杂程度。