CSS：如何从不直接位于锚标记中的链接中删除下划线？答案

【问题标题】：CSS: how do I remove the underline from a link that isn't directly in the anchor tag?CSS：如何从不直接位于锚标记中的链接中删除下划线？
【发布时间】：2011-07-09 14:31:07
【问题描述】：

<a href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>


a .action_box {
text-decoration: none;
}

没用=\

【问题讨论】：

您不能在锚点内使用div。请改用span。
请注意，divs 不能在任何 HTML 标准中的锚标记内。 divs 是块标签，而锚点是内联标签。并且其他内联内只能有内联标签。
如果将 div 更改为 span 元素，或者将 display:block 应用于锚标记，则不会有问题'
@Kyle, @Holger Just：它在 HTML5 中有效，主要原因是所有主流浏览器都支持它，即使它不是有效的 HTML4。因此，即使它现在无效，在实践中，它也可以在任何地方工作。（更多信息：html5doctor.com/block-level-links-in-html-5）
谢谢，我一直忘记这件事。哈哈。

标签： css

【解决方案1】：

您正在尝试从位于锚标记内的 div 中删除下划线

简单地使用

a{
text-decoration: none;
}

您可以将id赋予锚标签以更好地使用，

<a id="linkid" href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>

并使用 css

a#linkid{

     text-decoration: none;
}

【讨论】：

【解决方案2】：

你能不能只用这个。

#content > ul {
             text-decoration: none;
           }

以上显然是我自己的。

【讨论】：

【解决方案3】：

问题是，它不是在文本下划线，而是在 div 下划线。基本上，您仍然需要在锚点处定义规则，而不是为锚点内的内容：

a, a .action_box { text-decoration: none; }

【讨论】：

【解决方案4】：

您仍然需要将 text-decoration 样式应用于外部 href 标记。

示例如下：

<html>
    <head>
        <style>
        .noUnderline {
        text-decoration: none;
        }
        </style>
    </head>
  <body>
    <a class="noUnderline" href="/admin/menu_bars/select">
        <div class="action_box">
            Manage Menu Bars
        </div>
    </a>
</body>
</html>

【讨论】：

【解决方案5】：

您的代码试图从 div 中删除下划线（可能没有），而不是链接（可能有）。简单的

a {
text-decoration: none;
}

会起作用，尽管这会删除所有链接的下划线。

如果您需要更具体地了解该链接，请使用

<a class="action_link" href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>


a.action_link {
text-decoration: none;
}

这假定下划线实际上是链接元素上的 text-decoration 而不是 div 上的 border-bottom。

【讨论】：

在我的例子中是 1px box-shadow。

【解决方案6】：

很可能是另一个类/属性覆盖了您最近的尝试；但是，试试 Silence Dogood 所说的：

a div .action_box {
   text-decoration: none;
}

如果这不起作用，我们将需要查看 CSS 的其余部分。

【讨论】：

你抓住了我最初的猜测，不幸的是它不正确:(我对其进行了更新以使其正常工作。