CSS样式规则

Question

我正在尝试构建一个CSS规则，以便当用户悬停在链接上时，它将以白色和蓝色背景的文本为样式

a:hover {
color: #fff !important;
background-color: #215b87 !important;
}

这在大多数情况下都有效，但当你遇到像谷歌搜索这样的情况时，你会得到如下HTML：

<a aria-label="Page 5" class="fl" href="/search?q=Test+Search&amp;biw=1832&amp;bih=786&amp;ei=QMDRXb-kEoaT1fAPxtGHqAg&amp;start=40&amp;sa=N&amp;ved=0ahUKEwi_xJTenPLlAhWGSRUIHcboAYU4ChDy0wMIZQ"><span class="csb ch" style="background:url(/images/nav_logo299.png) no-repeat;background-position:-74px 0;width:20px"></span>5</a>

选择器中是否有一种方法可以只选择文本，只对文本应用格式，而忽略任何span、img标记等？

谨致问候，George

Answer 1

您可以使用通配符选择器取消设置锚点标记的子级的所有样式规则：

a:hover * {
background-position: unset !important;
width: auto !important;
background: unset !important;
}
a:hover {
color: #fff !important;
background-color: #215b87 !important;
}

<a aria-label="Page 5" class="fl" href="/search?q=Test+Search&amp;biw=1832&amp;bih=786&amp;ei=QMDRXb-kEoaT1fAPxtGHqAg&amp;start=40&amp;sa=N&amp;ved=0ahUKEwi_xJTenPLlAhWGSRUIHcboAYU4ChDy0wMIZQ"><span class="csb ch" style="background:url(/images/nav_logo299.png) no-repeat;background-position:-74px 0;width:20px"></span>5</a>