我的.css文件中包含以下内容，在网站上每个链接的旁边创建了一个小图像：

div.post .text a[href^="http:"]
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}

如何修改此代码段(或者添加一些新内容)以排除本身就是链接的图像旁边的链接图标？

解决方案

回答

向那些<a>标签添加一个类，然后添加另一个声明以删除背景可能是值得的：

div.post .text a.noimage{
   background:none;
}

回答

如果我们将链接的内容作为一个跨度，则可以这样做，否则我认为我们需要给一个方案一个类来区分它。

a > span {
  background: url(../../pics/remote.gif) right top no-repeat;
  padding-right: 10px;
  white-space: nowrap;
}
a > img {
  /* any specific styling for images wrapped in a link (e.g. polaroid like) */
  border: 1px solid #cccccc;
  padding: 4px 4px 25px 4px;
}

回答

我们要包含或者排除的a元素上都需要一个类名。如果我们不想在服务器端代码或者文档中执行此操作，则可以在加载页面时添加带有javascript的类。选择逻辑包装在其他地方，规则可能是：

a.external_link
{
    background: url(../../pics/remote.gif) right top no-repeat;
    padding-right: 10px;
    white-space: nowrap;
}

XPath可能会创建一个像我们一样的模式，该模式也将排除具有img子元素的a元素，但是这种功能已经被反复提出(2002、2006、2007)，并被CSS否决了，这主要是因为它违反了增量布局原则。

因此，尽管可以像使用上下文选择器和href属性上的前缀匹配一样进行整洁的条件性内容添加，但是CSS比通用编程语言要弱得多。要执行更复杂的操作，我们需要将逻辑上移并为样式引擎编写更简单的指令以进行处理。

回答

如果设置背景颜色，并且图像上的右边距为负，则图像将覆盖外部链接图像。

例子：

a[href^="http:"] {
  background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
  padding-right: 14px;
  white-space: nowrap;
}
a[href^="http:"] img {
  margin-right: -14px;
  border: medium none;
  background-color: red;
}

<a href="http://www.google.ca">Google</a>
<br/>
<a href="http://www.google.ca">
  <img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>

编辑：如果我们有带图案的背景，这对于具有透明性的图像将不会看起来很好。另外，href ^ =选择器在IE7上将不起作用，但我们可能已经知道