跨越内部p的CSS类

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>