CSS选择器:没有<img>作为孩子

Question

我正在尝试选择链接到没有子图像标记的外部网站的所有锚标记.如果我将图像作为链接,它会在这些图像旁边添加一些小的外部链接图标,但我不希望这样.

这是我到目前为止:

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

作为额外的奖励,我如何使用"https://"链接？

Answer 1

使用纯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;
}

请参阅演示(包括HTTPS):http://jsfiddle.net/hKTBp/1/