4

我有这样的 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;
}

我想得到这样的想法：

对于每个内部 pi 需要灰色下划线链接。如果标签中有跨度，则它必须是没有装饰的红色，并且在悬停时带有红色下划线。

现在我有灰色带下划线的链接，如果在标签内跨越 - 悬停时带有灰色下划线的红色链接和带有红色 udnerline 的红色链接。

我怎样才能只用css解决我的问题？我也一直在尝试这样的事情：

p a span .class-for-span {
text-decoration: none;
}

但它也不起作用......

4

3 回答 3

4 
p a span .class-for-span {
    text-decoration: none;
}

Won't work because of the space between span and .class-.... That would imply "the element with class class-... within the span". You can't overwrite an element's parent's property in CSS. The solution would be to set text-decoration:none; on the a tag and only use it on the 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.

于 2013-02-21T15:03:55.960 回答
1 
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>
于 2013-02-21T15:02:37.517 回答
1

a 元素是下划线，而不是跨度，因此当您从跨度中删除下划线时，您仍然有 a 元素保持其下划线。做你原来的块

p a span {
color: grey;
text-decoration: underline;
}

一切都应该开始工作

于 2013-02-21T15:00:23.417 回答