从超链接 div 中的链接中删除下划线

Posted 2023-03-05

【中文标题】从超链接 div 中的链接中删除下划线

【英文标题】：Remove underline from link within hyperlinked div

【发布时间】：2012-03-06 03:30:02

【问题描述】：

我正在使用下面的html

<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>

我遇到的问题是，从跨度文本中删除下划线的唯一方法是使用a:linktext-decoration:none;，但这会从整个页面的所有链接中删除下划线

我试过了

a.logo:linktext-decoration:none;

但它不会从 span 元素中删除超链接。

【问题讨论】：

a.logo 将不匹配，因为<a> 元素没有logo 类！

【参考方案1】：

子项不能使用 CSS 影响其父项。您需要在 A 标记上放置 ID 或类名，或者在树中找到可以为该元素指定的唯一内容。

【参考方案2】：

首先：这不是有效的 html... 你应该给你的 a 一个类或 id，否则这对于远程 css 是不可能的。内联 css 是可能的...

【参考方案3】：

看看这个

 <style type="text/css">
    .linkTsttext-decoration:none; 
    </style>

<div class="logo"><a href="" class="linkTst"><span class="whologo">hyperlinked text </span>
   </a> </div>

【讨论】：

你不会像这样教别人这样做吧？

@Shomz 抱歉，现在检查一下

更好的是，您可能还希望将 div 元素保留在锚点之外 - 这只是一种常见做法，但不确定它是否被视为无效。

@Shomz 是的，先生，非常感谢你，，现在看看这个，如果你有时间，找到我的个人资料，，tnks

【参考方案4】：

在你不想要下划线的标签上放置一个类

像这样：http://jsfiddle.net/UL8SW/

【参考方案5】：

你有一个错误的层次结构和错误的元素选择。在您的情况下，最准确的 CSS 将是：

a div.logo span.whologo text-decoration:none;

---

但我建议这种方法：

<div class="logo"><a href=""><span class="whologo">hyperlinked text </span></a>

还有 CSS：

div.logo a text-decoration:none;

如果需要，也可以包含 span（但前提是 span 元素有下划线，就像 Hans 在评论中指出的那样）：

div.logo a span.whologo text-decoration:none;

【讨论】：

这不起作用 Shomz。这是因为如果您不将其样式化，您的浏览器将在 a 下划线......这只给这个跨度没有下划线，但这不会发生在这里

+1 谢谢！但这就是为什么我说'如果需要'......想给他最准确的选择，但我不知道他的 CSS 的其余部分是什么样的。这是为了以防他以某种方式将下划线添加到 span 元素...

我实际上也是从你的回答开始的 :) 但后来想起了浏览器给a 元素的隐藏样式！

不过，这是一个很好的观点。我认为这一切都应该有助于他解决 CSS 问题。 :)

哈哈，当然希望如此，否则他应该尝试新的爱好:)

【参考方案6】：

给锚标签一个类。

HTML：

<a href="" class='no-underline'><div class="logo"><span class="whologo">hyperlinked text</span>

CSS：

.no-underline text-decoration: none;

【讨论】：

为什么要回答多年前已被接受的问题？