用于＆gt;的Css选择器强大

Question

我有一个简单的Css规则：

strong a:hover {
text-decoration: none;
}

这适用于以下HTML：

<strong>
<a href="www.stackoverflow.com">Go to website</a>
</strong>

问题是我使用的CMS中的Wysiwyg经常把代码放进去：

<a href="www.stackoverflow.com"><strong>Go to website</strong></a>

我的css规则然后不起作用。有纯粹的Css解决方案吗？

由于 人

Answer 1

CSS不支持您尝试做的事情 - 您无法设置父级样式。这里更好的方法可能是在链接中添加一个类：

<a href="http://www.stackoverflow.com" class="ImportantLink">Go to website</a>

CSS：

a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }

这样可以很容易地设置链接的样式。 <strong>可能在语义上是错误的，如果你只是用它来设置链接的样式，而不是强调文本（但是，这可能不那么重要，说实话）

工作示例： http://jsbin.com/ekuza5

Answer 2

使用
a:hover strong
{
text-decoration:none;
}

Answer 3

这应该有效：

.hrefspan a:hover, strong {
text-decoration: none;}

<span class="hrefspan"><a>...</a></span>

通过将其放入跨度并仅将css应用于该跨度的内容，它不会影响其他href或强大的。

Answer 4

因为你已经定义了规则强a：悬停 表示要应用于强html标记

中的标记的规则

Answer 5

所以你真正想要改变的一点就是锚的基础

a:hover { text-decoration:none; }

如果您希望这只影响页面上的特定链接，则将类应用于它们。

<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>

a.notunderlined:hover { text-decoration:none; }