时间戳

首页 > 解决方案 > CSS 样式规则

html - CSS 样式规则

问题描述

我正在尝试构建一个 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 标签等？

问候，乔治

标签： htmlcss

解决方案

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

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>

推荐阅读