Question

我正在尝试建立一个CSS规则，以便当用户将鼠标悬停在其上时，链接样式设置为带有白色和蓝色背景的文本。我建立了一条规则，内容如下：

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

这在大多数情况下都有效，但是当您遇到诸如Google搜索之类的情况时，您将获得如下所示的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>

选择器中是否可以选择仅文本以仅将格式应用于文本并忽略任何跨度，img标签等？

关于，乔治

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>

CSS样式规则

1 个答案: