0

我在<a>带有背景图像的标签上使用了特殊的链接效果：CSS。链接看起来不错，但该网站还包含很多<img>链接，这些链接也获得了 CSS。

我目前正在用 jQuery 解决这个问题：$("img").parent().css("background", "none"); 是否有任何正确的方法可以使用 CSS 来做到这一点，让这个 CSS 不影响标签。

代码：

a:link ,a:visited {
    text-decoration: none;
    background-image: url(/underline.png);
    background-repeat: repeat-x;
    background-position: bottom;
}

CSS4 定义了以下语法：

!a>img {background-image:none}

但是，据我所知，还没有浏览器支持它。!正如所有建议的那样a!>img，它也不是最终的去向。!a!>img

所以，基本上，没有 CSS 解决方案。但是，有一个“黑客”解决方案。

假设body {background:white}，您可以这样做：

a>img {background:white}

这将用白色的背景覆盖链接的背景，这实际上隐藏了它。根据需要调整颜色。请注意，如果您的内容区域有背景图像，这将不起作用...

4

4 回答 4

1

CSS4 定义了以下语法：

!a>img {background-image:none}

但是，据我所知，还没有浏览器支持它。!正如所有建议的那样a!>img，它也不是最终的去向。!a!>img

所以，基本上，没有 CSS 解决方案。但是，有一个“黑客”解决方案。

假设body {background:white}，您可以这样做：

a>img {background:white}

这将用白色的背景覆盖链接的背景，这实际上隐藏了它。根据需要调整颜色。请注意，如果您的内容区域有背景图像，这将不起作用...

于 2013-06-02T21:20:50.020 回答
0

您的链接有什么不同？
域、特定文件夹、扩展名等...
我问是因为您可以通过 url 过滤它们。 

[href~=picto] will mathch if url contains picto or something similar
[href^="image/] will match any url begining with  image/whatever_is_behind_or_not
[href*="image/] will match any url containing  image/
[href$=".jpg"] will match any url ending with this .jpg extension

正如你所看到的，现在有很多选择，但 level4 会更容易:)

于 2013-06-02T21:46:28.170 回答
0

好吧，除非我遗漏了什么，否则解决这个问题的方法相当简单。

在我工作的一个网站上，我使用以下两个 CSS 规则来区分链接文本效果和链接图像效果：

a:link {
  /* rules for linked text effects */
}

a img {
  /* rules for linked img effects */
}
于 2013-06-02T21:59:27.050 回答
0

当我看到这个时：background-image: url(/underline.png);我很紧张。您需要在这里使用一些特殊效果吗？CSS中的下划线属性有什么问题？

要在 CSS2 中解决这个问题，您需要重新设计代码。因此，这可能有点不切实际。

保留链接的 CSS 代码。

然后，无论您在哪里有带有图像的链接，都应该添加一个类。使用此类链接覆盖典型行为的 CSS。

在当前的 CSS 功能中没有办法做你想做的事。Jquery 工作，但它毕竟是一个 hack。

 a {
   code here that you want
 }
 a.img {
   override properties
 }

 <!-- Html -->
 <a href="#">Normal Text</a>
 <a class="img" href="#"><img src="image.png" width="x" height="y" alt="" /></a>

一些思考 -> CSS 不支持您所寻求的原因是因为孩子不应该定义父母的风格！毕竟，我们（作为人）没有定义我们父母的特质，但我们肯定会超越我们继承的东西。

于 2013-06-02T22:37:25.860 回答