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

Question

<a href="#">
        <img width="103" height="100"  src="img source">
    </a>

对于上面的HTML代码我使用以下css

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

a img {
    border: 0 none;
}

基本上我想在这里实现的是强调文本链接,同时保持img链接没有任何下划线.但是我想通过样式化文本链接我也是样式图像链接,我希望链接中的任何图像都不应该加下划线.

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

Answer 1

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

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

为什么会这样？

默认情况下,锚点和图像都是内联元素,并应用vertical-align:top; 对于锚内的图像,我们将锚移动到图像的顶部.由于某种原因,图像具有比锚更高的z指数.

来源:从图像链接中删除边框

顺便说一句,它可以很好地与父选择器a < img... ...不幸的是,这还没有实现,但在工作中.看看这里:https://stackoverflow.com/a/45530/114029

Answer 2

下划线是由 a 上的文字装饰引起的。所以只需申请text-decoration:nonea即可。

编辑：目前没有仅 CSS 的方法可以将样式应用于“任何a以 animg作为其子项的样式”。CSS 没有相应的选择器。因此，您要么必须a通过为它们提供类（或其他属性）并将 CSS 应用到这些类来使这些 s 独一无二，要么运行一些脚本来测试simg中的as 并为这些as 提供所需的样式。