用于内部p内部跨度的CSS类。
用于内部p内部跨度的CSS类。
提问于 2013-02-21 14:56:33
我有这样一个HTML结构：
<p>
<a href="#">
<span class = "class-for-span"> SOME TEXT HERE </span>
</a>
</p>和CSS：
p a{
color: grey;
text-decoration: underline;
}
.class-for-span {
color: red;
text-decoretion: none;
}
.class-for-span:hover {
text-decoration:underline;
}我想让一些人这样想：
对于每个a内部p，我需要灰色下划线链接。如果标记中有跨度，它必须是红色的，没有装饰，并且在悬停时加红色下划线。
现在我有了灰色的带下划线的链接，如果跨越了一个带有灰色下划线的标记红色链接和悬停时带有红色红线的红色链接。
我怎样才能只用css解决我的问题？我也一直在尝试这样的东西：
p a span .class-for-span {
text-decoration: none;
}但它不太管用...
回答 3
Stack Overflow用户
发布于 2013-02-21 15:03:56
p a span .class-for-span {
text-decoration: none;
}不会工作，因为span和.class-...之间的空格。这意味着“在跨度内具有类class-... 的元素”。在CSS中不能覆盖元素的父元素的属性。解决方案是在a标记上设置text-decoration:none;，并仅在span上使用它
p a { text-decoration:none; }
p a span.class-for-span { text-decoration:none; }
p a:hover span.class-for-span { text-decoration:underline; }这将使下划线在锚点悬停时出现，但不一定在跨度悬停时出现。因此，即使您执行了以下操作，下划线仍会出现在跨度上：
<a href="..."><span>Text</span><img src="..." alt="" /></a>...and将鼠标悬停在图像上。
Stack Overflow用户
发布于 2013-02-21 15:00:23
A元素是要加下划线的元素，而不是span，因此当您从span中删除下划线时，a元素仍然保留其下划线。创建你的原始块
p a span {
color: grey;
text-decoration: underline;
}一切都应该开始工作了
Stack Overflow用户
发布于 2013-02-21 15:02:38
p a:link, p a:hover, p a:active, p a:visited {
/* works for any 'a' tag inside a 'p' tag */
border-bottom: 2px dotted #CCCCCC;
}这将适用于以下内容：
<p><a href="#">Hello</a><br>
<a href="#">Hello again</a></p>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15005331
复制相关文章
相似问题
腾讯云开发者
