避免我的图片（链接）有底部边框答案

【问题标题】：Avoid my images (which are links) to have a bottom border避免我的图片（链接）有底部边框
【发布时间】：2015-06-02 19:18:30
【问题描述】：

我在锚链接上定义了一个底部边框 (2px)。

问题：当这些是链接时，这个底部边框也会应用到我的图像上。

如何避免图像出现这种底部边框？

HTML：

<a href="#">hello</a>
<a href="#">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

CSS：

a {
    text-decoration: none;
    color: #3e3e3e;
    border-bottom: solid 2px #60bbd2;
}

a img {
    border: 0;
}

a:hover{
    border-bottom: 0px none;
    color: #60bbd2;
}

Jsfiddle：http://jsfiddle.net/8L63n7nu/1/

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

边框不在img 上，它在a 上，这就是a img {border: 0;} 没有任何变化的原因。不幸的是，CSS 没有 :parent 或 :contains-selector 可用于检查 a 是否包含图像，因此您必须以某种方式分隔链接。我建议给链接一个类，例如：

<a href="#" class="image">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

并添加规则：

a.image{border:none}

...或...

如果您不想添加类，则必须使用 JS。 jQuery 有:has() 选择器，您可以使用它来检查元素是否包含指定的元素。如果你将它包装在一个 jQuery 包装器中，它会在页面加载时运行，并且就像 css 一样工作。

$(function(){
    $("a:has(img)").css({border:"none"});
});

请注意，如果您在不刷新页面的情况下添加更多链接（例如使用 ajax），则必须再次运行上述函数来处理新链接。

这也是一个有效的fiddle。

【讨论】：

那不是 JS。这是 jQuery。

【解决方案2】：

为锚点添加一个类，其中包含图像

HTML：

<a href="#" class="img">
    <img src="https://cdn0.iconfinder.com/data/icons/cosmo-medicine/40/dog-128.png">
</a>

CSS：

a {
    text-decoration: none;
    color: #3e3e3e;
    border-bottom: solid 2px #60bbd2;
}

a.img {
    border: 0;
}

a:hover{
    border-bottom: 0px none;
    color: #60bbd2;
}

http://jsfiddle.net/8L63n7nu/14/

【讨论】：

不幸的是，我无法添加任何我无权访问 html 代码的类。
JavaScript/jQuery 怎么样？
Javascript / jQuery 可能是可以接受的，但我认为只有 css 才有可能
不幸的是你不能上 CSS。查看 Ilpo Oksanen 的 JS 方法
@Demnogonis 不正确。请参阅my answer。