仅在<a> and ignoring <img/>

Question

I have a style like:

a {border-bottom: 1px solid gray; text-decoration: none}

Now if I put an <img> inside a <a>, the <img> gets the border too. Is there a way to prevent this?

a img {border:0} doesn't work because a has the border, not img. Fiddle: http://jsfiddle.net/wp480vdv/1/

中设置样式

对于大型网站来说，添加类是否具有边框是很困难的。

Answer 1

您可以使用JQuery执行此操作

解决方案1： http://jsfiddle.net/wp480vdv/8/

$('a').has('img').css('border-bottom', 'none');

解决方案2 http://jsfiddle.net/wp480vdv/9/

$("a:not(:has(>img))").css('border-bottom', '1px solid gray');

Answer 2

如果您只想为文字下划线而不是图片，那么您就不需要为<a>标记提供边框底部。
你可以修改你的html。

html

<div>
  <a>
    <span>hello</span>
    <img src="a.jpg">
  </a>
</div>

默认情况下，<a>标记中有下划线 因此，如果使用a{text-decoration:none;}，那么为什么要给边框底部。 无论如何，如果想为文本提供边框底部，那么你可以这样做。

css

a {
  /*border-bottom: 1px solid gray;*/
  text-decoration: none
}

span {
  border-bottom: 1px solid gray;
}

img {
  border: none;
}

Answer 3

CSS不支持基于内容的选择;我怀疑它永远是。 你可以做的越近，没有Javascript就是属性选择器：

a {border-bottom: 1px solid gray; text-decoration: none}
a[href="/foo"] {border:0px}

http://jsfiddle.net/wp480vdv/10/

可能是<a>属性中包含与仅包含文本的<a>不同的图像的内容吗？