Question

我在<a>标签上使用了带有background-image：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;
}

Answer 1

CSS4定义了以下语法：

!a>img {background-image:none}

但是，据我所知，目前还没有浏览器支持它。由于!和a!>img都被建议，因此!a!>img的位置也不是最终的。

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

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

a>img {background:white}

这将用白色覆盖链接的背景，这基本上隐藏了它。根据需要调整颜色。请注意，如果您的内容区域有背景图片，则无法使用此功能...

Answer 2

您的链接会有什么不同？
域名，文件夹，扩展名等...
我问你因为你可以通过网址过滤它们。

[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会让它变得更容易：）

Answer 3

好吧，除非我遗漏了一些东西，否则解决方法很简单。

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

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

a img {
  /* rules for linked img effects */
}

Answer 4

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

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

保留您的css代码以获取链接。

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

在当前的CSS功能中无法做到你想要的。 Jquery有效，但它毕竟是黑客攻击。

 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>

一些值得思考的东西 - ＆gt; CSS不支持你所寻求的是因为孩子不应该定义父母的风格！ AFterall，我们（作为人）没有定义我们父母的特征，但我们肯定会覆盖我们继承的东西。

将CSS应用于

4 个答案: