仅当锚标记包含 img 时才从图像中删除链接下划线 [英] remove link underline from image only if the anchor tag contains an img

问题描述

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

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

for the above html code I am using the following css

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

a img {
    border: 0 none;
}

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

Basically what I am trying to achieve here to underline the text links while keeping img links without any underline. however I guess by styling the text links I am also styling image links, I want any image in a link should not be underlined.

有人可以建议解决这个问题吗?

Can any one suggest work around for this?

推荐答案

下划线是 a.所以只需将 text-decoration:none 应用到 a.

The underline is caused by the text decoration on the a. So just apply text-decoration:none to the a.

编辑:目前没有仅使用 CSS 的方法可以将样式应用于任何以 img 作为其子项的 a".CSS 没有用于此的选择器.因此，您要么必须通过为它们提供类(或其他属性)并将 CSS 应用于这些类来使这些 a 独一无二，要么运行一些脚本来测试 imgas 中的 >s 并赋予那些 as 所需的样式.

Edit: there is currently no CSS-only way to apply a style to "any a that has an img as its child". CSS does not have selectors for that. So you'll either have to make these as unique by giving them classes (or other attributes) and apply the CSS to those classes, or run some script that tests for imgs in as and gives those as the desired style.

这篇关于仅当锚标记包含 img 时才从图像中删除链接下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！