html - 内部 p 中 span 的 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 中的每个 a，我都需要带灰色下划线的链接。如果标签中有 span，则它必须是没有修饰的红色，悬停时必须是红色下划线。

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

如何仅使用 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 中覆盖元素的父级属性。解决方案是在 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; }

这将导致下划线在 anchor 悬停时出现，但在跨度悬停时则不一定。所以下划线仍然会出现在跨度上，即使你有:

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

...并将鼠标悬停在图像上。