在p标签内的span元素的CSS类

Question

I have such a structure of 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标签需要灰色带下划线的超链接。如果a标签内有span标签，那么它必须是没有装饰的红色文字，当鼠标悬停时，它将变为红色带下划线的超链接。

现在我有了灰色带下划线的超链接，如果a标签内有span标签，它将成为灰色带下划线的红色链接，并且当鼠标悬停时，它将变为红色带下划线的红色链接。

如何只使用CSS解决我的问题？我也尝试过类似于以下的内容：

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

但它也没有起作用...

- kmb

---

您的 class-for-span 类中的 text-decoration 属性存在拼写错误。 - Hari Pachuveetil

你是指像这样吗？http://jsfiddle.net/qULTP/ - Mathew Thompson

@mattytommo 不，我的意思是这样的：p a{ color: 灰色; text-decoration: 下划线; }.class-for-span { color: 红色; text-decoration: 无; }a:hover { text-decoration:下划线; color: 红色; }但我不能改变 p a {} 的样式。 - kmb

Answer 1

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

由于 span 和 .class-... 之间有空格，所以无法正常工作。这意味着“在 span 中具有类名为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; }

这将导致当鼠标悬停在锚点上时出现下划线，但不一定在悬停在span上时出现。因此，即使您有以下代码：

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

…并悬停在图像上。

- James Donnelly

---

它似乎仍然不能正常工作。没有 span 标签的标签不会被下划线标记。 - kmb

问题在于没有 CSS 父选择器。你不能说“如果这个元素存在于父元素内，就以不同的样式呈现父元素”。你可以做的是将类添加到锚点而不是 span：<a class="class-for-span"><span>Blah</span></a>，然后使用以下样式：a.class-for-span { text-decoration:none; } a.class-for-span:hover { text-decoration:underline; } - James Donnelly

我知道，但问题在于我正在使用某种CMS，我想自定义其中一个组件，并且在富文本编辑器中设置文本样式只会在该文本周围添加带有适当类的<span>。当我为普通的<p>添加样式时，它可以工作，但是当我想要为<a>添加样式时，它只会在<a>内部添加<span>。我知道有一些方法可以使用jQuery来实现这一点，但是在这个项目中我无法这样做。 - kmb

Answer 2

元素被下划线标记，而不是元素。因此，当您从中删除下划线时，元素仍保留其下划线。请使原始块。

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

而且一切应该开始工作。

- bizzehdee

---

然而，span样式不会被a标签样式覆盖，它看起来仍然存在。此外，我需要为p a span添加text-decoration: none;。 - kmb

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>

- Ozzy