如何从包含在锚点中的图像中删除下划线？

Question

无论如何，我有一个问题。我想这是一个小小的问题，但是有一个问题让我烦恼。我在我的博客上为我的主播更新了CSS，以便用边框加下划线。现在问题是我链接的所有图像都有下划线，看起来不对。

所以我假设解决这个问题的唯一方法是将CSS类应用于锚点内的所有图像，以便它们具有border: none;。我不知道怎么做。有人愿意解释这是否可能？提前谢谢。

Answer 1

试试这个：

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

然而，这非常普遍，如果您的锚具有填充，它将无法完全起作用，图像的左右可能会留下残留下划线。

最好在一般情况下关闭链接的下划线，为你的锚定义一个CSS类，并在该类中打开下划线：

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

Answer 2

试试这个：

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

它将下划线移动到图像下方的顶部和下方。

Answer 3

下划线由text-decoration CSS属性控制。所以，如果你想关闭它：

a { text-decoration: none; }

Answer 4

在jQuery中，您可以使用the has selector将类添加到其中包含图像的所有链接：

$('a:has(img)').addClass('image-link');

然后从CSS中的那些链接中删除边框：

a.image-link {
    border-bottom-style: none;
}

它只适用于启用JavaScript的情况。