Question

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

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

如何修改此代码段（或添加新内容）以排除链接本身图像旁边的链接图标？

Answer 1

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

示例：

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，但您可能已经知道

Answer 2

为这些<a>标记添加一个类然后添加另一个声明以删除背景可能是值得的：

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

Answer 3

如果您将链接的内容作为范围，则可以执行此操作，否则我认为您需要为一个方案提供一个类来区分它。

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;
}

Answer 4

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

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

XPath可以创建一个像你这样的模式，也可以排除a个孩子的img元素，但是这个工具已经重复（2002，{{3 }}，2006）建议并拒绝CSS，主要是因为它违背了增量布局原则。

因此，尽管可以像href属性那样使用上下文选择器和前缀匹配来添加整齐的条件内容，但CSS比通用编程语言弱得多。要做更复杂的事情，你需要将逻辑上移一个级别，并为样式引擎写出更简单的指令来处理。

我在每个链接旁边都有一个链接图标。如何从图像中排除链接图标？

4 个答案: