CSS selector：否<img> as child

我試圖選擇鏈接到沒有子圖像標記的外部網站的所有錨標記。如果我有一個圖像作爲鏈接，它會在這些圖像旁邊添加一個小的外部鏈接圖標，但我不想那樣。CSS selector：否<img> as child

這是我到目前爲止有：

a[href^="http://"]{ 
    background:transparent url(..icon/external.png) center right no-repeat; 
    display:inline-block; 
    padding-right:18px; 
}

作爲額外的獎勵，我將如何使它與合作「的https：//」鏈接呢？

來源

2012-08-09 MaxGhost

目前不能用CSS來完成。 [仍然沒有父母選擇器。]（http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector） – thirtydot 2012-08-09 15:52:16

我不能等待CSS 4規範成爲標準...似乎有很多很酷的功能來自那裏。 – MaxGhost 2012-08-09 15:56:17

填充爲鏈接右側的圖標提供空間，然後背景將圖像自身添加到右側。內聯塊使整個鏈接包括圖片可點擊。 [看到這裏的更多信息]（http://web-kreation.com/all/add-file-type-icons-next-to-your-links-with-css/） – MaxGhost 2012-08-09 16:00:24

這不可能與普通的CSS。然而，你可以使用一點jQuery的巫術：

的jQuery：

$("a[href^='http://']:not(:has(img))").addClass("external");

CSS：

a.external { 
    background:transparent url(..icon/external.png) center right no-repeat; 
    display:inline-block; 
    padding-right:18px; 
}

見演示：http://jsfiddle.net/hKTBp/

觀看演示（包括HTTPS）：http://jsfiddle.net/hKTBp/1/

來源

2012-08-09 15:52:50 Curt

我不認爲你可以安全假設他安裝了jQuery。 – kojiro 2012-08-09 15:56:01

@kojiro我同意，但我可以放心地說，OP想要的是不可能的，我提供了一個很好的選擇。 – Curt 2012-08-09 15:56:48

不錯的修復！我寧願選擇一個非JS的解決方案，但這是有效的。我有jQuery，所以這很好。 – MaxGhost 2012-08-09 15:57:03

CSS selector：否<img> as child

回答

相關問題