仅当锚标记包含 img 时才从图像中删除链接下划线

Posted 2023-03-06

【中文标题】仅当锚标记包含 img 时才从图像中删除链接下划线

【英文标题】：remove link underline from image only if the anchor tag contains an img

【发布时间】：2012-02-22 01:31:39

【问题描述】：

<a href="#">
        <img    src="img source">
    </a>

对于上面的 html 代码，我使用下面的 css

a 
    border-bottom-style: dotted;
    border-bottom-width: 1px;


a img 
    border: 0 none;

基本上我在这里想要实现的目的是在文本链接下划线，同时保持 img 链接没有任何下划线。但是我想通过设置文本链接的样式我也在设置图像链接的样式，我希望链接中的任何图像都不应该加下划线。

任何人都可以建议解决这个问题吗？

【参考方案1】：

下划线是a上的文字修饰造成的。所以只需将text-decoration:none 应用于a。

编辑：目前没有纯 CSS 方法可以将样式应用于“任何以 img 为子级的 a”。 CSS 没有选择器。因此，您要么必须通过给它们类（或其他属性）来使这些 as 独一无二，并将 CSS 应用于这些类，或者运行一些脚本来测试 as 中的 imgs 并给出这些as 想要的风格。

【讨论】：

这也将删除文本链接的下划线，我只想为图像链接删除它，我的意思是如果锚标签只包含图像而不包含文本

好吧，例如，您可以将所有包含图像的as 赋予某个类，并仅将text-decoration:none 用于该类。

如果内容（链接）是静态的，则此解决方案有效，在我的情况下，这些链接是由最终用户使用 CMS 添加到站点的，我无法控制仅使用 css 向此类链接添加类我可能必须在这里使用jquery。难道只能用css吗？

不，不是没有类名之类的句柄。那么你将需要javascript。或者服务器端的东西，如果添加的东西会导致页面加载。

是的，没有任何方法可以使用纯 CSS 方法，使用 jquery 解决这个特殊问题 $("a img").parent().css('border','0px') ;

【参考方案2】：

你可以使用CSS Descendent Selector

所以，在你的情况下：

a > img  text-decoration: none; 

但是，上述规则会将样式添加到图像（即后代）而不是父图像，因此它可能不是您要查找的内容。不幸的是，没有 CSS 规则可以在后代的情况下将样式应用于父级。

【讨论】：

没错。给孩子text-decoration:none 对父母的装饰毫无作用。也就是说，这条线仍将被绘制。你是对的，CSS 没有任何关于“一个元素是另一个元素的父元素”的规则。也许在 CSS4 中。

@MrLister：CSS4 似乎确实提出了一个上升选择器 (davidwalsh.name/css4-preview)

【参考方案3】：

如果您不能为每个包含图片的链接设置一个类，则您必须使用 javascript。您可以简单地添加如下内容：

jQuery(document).ready(function($) 
    var a_with_img = $('a').children()
    $(a_with_img).parent().css('text-decoration', 'none');
);

这应该可以，但是使用 js 来定位所有 'a' 选择器绝不是一个好主意，它的负载非常重。可能会导致您的整体页面加载速度变慢。

【参考方案4】：

经过大量谷歌搜索，我终于找到了一个适合我的巧妙技巧：

a img  border:none; vertical-align:top; 

为什么会这样？

默认情况下，锚点和图像都是内联元素，并且通过应用 垂直对齐：顶部；到锚点内的图像，我们移动锚点 到图像的顶部。由于某种原因，图像具有更高的 z-index 比锚。

来源：Remove Border from Image Links

顺便说一句，它与a < img 之类的父选择器一起使用会很好......不幸的是，这还没有实现，但正在工作中。看这里：https://***.com/a/45530/114029

【讨论】：

简单实用。真的很有帮助。谢谢你。 :)

【参考方案5】：

我已经使用 jquery 解决了这个问题，只需将 jquery.js 链接到头部并将其放在正文中：

    <script type="text/javascript">

        $("body").ready(function () 

                $("a").has("img").addClass("imglink");

        );
</script>

然后给类a.imglink设置样式