logo标签列表

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

htmlcsshref
4
我正在使用下面的HTML代码。
<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>

我遇到的问题是，仅有的一种去掉span文本下划线的方法是使用a:link{text-decoration:none;}，但这会移除整个页面中所有链接的下划线。

我已经尝试过:

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

但它并不能从span元素中移除超链接。
"a.logo" 不匹配，因为 <a> 元素没有 "logo" 类！ - xec
6个回答
3

你的层级结构有误，元素选择不当。在你的情况下，最准确的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;}
1
这不会起作用，Shomz。这是因为如果您没有将其样式化，您的浏览器将会给 a 加下划线... 这只会使这个 span 没有下划线，但在这里并没有发生这种情况。 - Hans Wassink
+1 谢谢！但这就是我说“如果需要”的原因...我想给他最准确的选择，但我不知道他的CSS的其余部分是什么样子的。这是为了防止他不小心将下划线添加到span元素中... - Shomz
我也是从你的答案开始的 :) 但是后来想起了浏览器给a元素隐藏样式！ - Hans Wassink
这是一个不错的观点。我认为所有这些都应该帮助他解决那个CSS问题。 :) - Shomz
1
哈哈，希望如此，否则他应该尝试新的爱好 :) - Hans Wassink
3

子项无法使用CSS影响其父级元素。您需要在A标签上放置一个ID或类名，或者找到树上的某个唯一元素来指定此元素。

2

看这个

 <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
@Shomz 抱歉，现在请检查一下。 - Sam Arul Raj T
更好的做法是，你可能也想把 div 元素放在锚点之外 - 这只是一种常见的做法，不确定是否被认为是无效的。 - Shomz
1
@Shomz 是的先生，非常感谢您，请查看一下，如果您有时间，请找到我的个人资料，谢谢。 - Sam Arul Raj T
0

给锚点标签添加一个类。

HTML：

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

CSS：

.no-underline {text-decoration: none;}
为什么回答一个几年前已有被接受回答的问题？ - Omar Siddiqui
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接