如何在 CSS 中选择文本而不是图像答案

【问题标题】：How to select text, but not images, in CSS如何在 CSS 中选择文本而不是图像
【发布时间】：2010-03-20 18:51:05
【问题描述】：

简单的问题：我有以下标记...

<a href='#'>
  <img src='icon.png'> This is the link
</a>

我想让文本在鼠标悬停时变为下划线。

什么是 CSS 选择器，只选择 <a> 元素中的文本而不选择其他内容？如果没有必要，我宁愿不把它包起来。

a:hover {
  text-decoration: none;
}
a:hover <select_text_here> {
  text-decoration: underline;
}

【问题讨论】：

【解决方案1】：

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

a img{
   text-decoration: none;
}

应该这样做。这样，a 中的所有 img 标签都将没有任何下划线。

【讨论】：

【解决方案2】：

文本必须在它自己的元素中才能在 CSS 中选择。您必须使用 span 或类似名称：

<a href="#"><img src="" /><span class="link-text">Foo</span></a>

显然你可以使用.link-text 来选择它。

【讨论】：

【解决方案3】：

由于文本没有您可以选择的任何单独的“句柄”，您可以做的最好的事情是在整个a 标记下划线，其中包括图像。从技术上讲，图像本身不会加下划线，因此您甚至不能“取消下划线”。

您要么必须将图像与文本分开，要么将文本包裹在 span 中并仅突出显示。

【讨论】：

【解决方案4】：

我看到 Opera/IE 没有给图像加下划线，但 FF 有。最简单的修复方法是添加span 元素：

<a href="..."><img ... /> <span>...</span></a>

然后将text-decoration 应用到span 元素：

a:hover span {
  text-decoration: underline;
}

据我所知，您不能只选择文本。

【讨论】：

【解决方案5】：

也许试试这个：

a:hover {
  text-decoration: underline;
}
a:hover IMG {
  text-decoration: none;
}

【讨论】：

【解决方案6】：

a:hover {
  text-decoration: underline;
}
a:hover img {
  text-decoration: none;
}

你可以做的另一件事是

a{
    background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}

或类似的，因此您不必在链接中包含图像元素

【讨论】：