Question

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

我想得到这样的想法：

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

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

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

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

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

Answer 1

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

由于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; }

这将导致在锚点悬停时出现下划线，但不一定在跨度悬停时出现。因此，即使您有下划线，下划线仍会显示在跨度上：

<a href="..."><span>Text</span><img src="..." alt="" /></a>

......并在图像上盘旋。

Answer 2

a元素是带下划线的，而不是span，所以当你从span中删除下划线时，你仍然有一个元素保持下划线。制作原始块

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

并且一切都应该开始工作

Answer 3

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>

跨越内部p的CSS类

3 个答案: