html - 删除 anchor 标记内图像的边框

Question

所以..我在 anchor 标签中添加了底部边框，以使它们脱颖而出。但我有一些图像也用 anchor 标签扭曲。问题是，我不知道如何从图像中删除边框。

请注意，我使用的是 WordPress，无法编辑链接和图像的显示方式

这是我的 CSS 代码:

.entry-content a {
padding:0 3px;
color: #104273;
border-bottom:2px solid #104273;
}

我的问题是，有什么办法可以制作这样的东西吗？

.entry-content a img {
border:none;
}

所以它只删除带有链接的图像的边框？

http://codepen.io/andornagy/pen/sdzBq

Answer 1

您遇到的问题是您正在设置 anchor 标记的样式，然后尝试在 <img> 上覆盖该样式。标签，实际上并没有应用样式，而是它的父标签。

如果您不想使用 Javascript，您可以将文本包含在 <span> 中的链接中。跨越的标签和样式而不是 anchor 本身。

HTML

<a href='#'><span>This is a blank Link</span></a>
<a href='#'><img src="..."></a>

CSS

a {
    padding:0 3px;
    color: #104273;
    text-decoration:none;
}
a span {
    border-bottom:2px solid #104273;
}

这是一个实际的 fiddle :http://jsfiddle.net/xVSA9/

更新

好的，这是使用 jQuery 的 parent() 的解决方案选择器。

$('img').parent('.entry-content a').css("border-bottom", "none");

保持 CSS/HTML 不变，这应该可以正常工作。

这是一个 fiddle :http://jsfiddle.net/GeR85/