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

【问题标题】：Remove underline from link within hyperlinked div从超链接 div 中的链接中删除下划线
【发布时间】：2012-03-06 03:30:02
【问题描述】：

我正在使用下面的html

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

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

我试过了

a.logo:link{text-decoration:none;}

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

【问题讨论】：

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

标签： html css href

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

看看这个

 <style type="text/css">
    .linkTst{text-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;}

【讨论】：

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