造型只有在<a>文本，而忽略<img>

Question

我有這樣一個風格：

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

現在，如果我把一個<img>一個<a>裏面，<img>得到邊界了。有沒有辦法來防止這種情況？

a img {border:0}不起作用，因爲a有邊界，而不是img。小提琴：http://jsfiddle.net/wp480vdv/1/

對於大型網站而言，添加具有邊框或無邊框的類很困難。

Answer 1

您可以使用jQuery做這個

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

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

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

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

Answer 2

如果你只是想給下劃線的文本不對於圖像來說，那麼你不需要爲01給出邊界標籤。
你可以像這樣修改你的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>不同？