Html 内部 p 内跨度的 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15005331/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS class for span inside a inside p
提问by kmb
I have such a structure of HTML:
我有这样的 HTML 结构：
<p>
<a href="#">
<span class = "class-for-span"> SOME TEXT HERE </span>
</a>
</p>
and CSS:
和 CSS：
p a{
color: grey;
text-decoration: underline;
}
.class-for-span {
color: red;
text-decoretion: none;
}
.class-for-span:hover {
text-decoration:underline;
}
I want to get somethink like this:
我想得到这样的想法：
For every a inside p i need grey underlined link. If there is span into a tag it must be red without decoration, and red underlined when its hover.
对于每个内部 pi 需要带灰色下划线的链接。如果标签有跨度，它必须是没有装饰的红色，并且在其悬停时为红色下划线。
Now I have grey underlined link, if span inside a tag - red link with grey underline and red link with red udnerline when it's hover.
现在我有灰色带下划线的链接，如果跨在标签内 - 带有灰色下划线的红色链接和带有红色 udnerline 的红色链接悬停时。
How can i solve my problem only with css? I've been trying also something like this:
如何仅使用 css 解决我的问题？我也一直在尝试这样的事情：
p a span .class-for-span {
text-decoration: none;
}
but it's not working too...
但它也不起作用......
回答by James Donnelly
p a span .class-for-span {
text-decoration: none;
}
Won't work because of the space between spanand .class-.... That would imply "the element with class class-...withinthe span". You can't overwrite an element's parent's property in CSS. The solution would be to set text-decoration:none;on the atag and only use it on the span:
会不会因为之间的空间的工作span和.class-...。这意味着“跨度class-...内具有类的元素”。你不能在 CSS 中覆盖元素的父属性。解决方案是text-decoration:none;在a标签上设置并仅在以下位置使用它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; }
This will cause the underline to appear when the anchor is hovered over, but not necessarily when the span is hovered over. So the underline would still appear on the span even if you had:
这将导致在锚点悬停时出现下划线，但不一定在跨度悬停时出现。因此，即使您有：
<a href="..."><span>Text</span><img src="..." alt="" /></a>
...and hovered over the image.
...并悬停在图像上。
回答by bizzehdee
the a element is what is being underlined, not the span, so when you remove the underline from the span, you still have the a element keeping its underline. make your original block
a 元素是被加下划线的元素，而不是跨度，因此当您从跨度中删除下划线时，a 元素仍然保留其下划线。制作你的原始方块
p a span {
color: grey;
text-decoration: underline;
}
and everything should begin to work
一切都应该开始工作
回答by Ozzy
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;
}
that will work for these:
这将适用于这些：
<p><a href="#">Hello</a><br>
<a href="#">Hello again</a></p>
