通过选择Child将样式应用于Parent

Question

有些浏览器（至少Chrome）会在嵌套在锚标记内的图像下放置部分下划线，如下所示：

<a href="#"><img src="/foo.jpg" /></a>

所以我正在寻找一种方法将text-decoration: none;添加到包含img标签的任何锚标签。我的第一个想法是：

a img {
    text-decoration: none;
}

当然这不起作用，因为样式应用于img标记，而不是锚点。那么我可以使用一个选择器将文本修饰样式应用于任何带有img child的锚标记吗？

编辑： 我的HTML通常如下所示：

<a href="#">
    <img src="/foo.jpg" />
</a>

我对元素进行空格和制表的方法是在锚标记和图像标记之间添加额外的空格。正是这个白色空间被强调了。

Answer 1

如果您反对在此<a>标记中添加一个类（这是一个简单的解决方案），那么您的下一个最佳CSS解决方案是删除<a>标记上的文本修饰，并将其换行要在内联元素中加下划线的文本。见下文：

对于图片：

<a href="#">
  <img src="/foo.jpg" alt="etc" />
</a>

对于文字：

<a href="#">
  <span>Text that you probably want underlined</span>
</a>

组合：

<a href="#">
  <img src="/foo.jpg" alt="etc" /> <span>Text that you probably want underlined</span>
</a>

CSS：

a { text-decoration: none; }
a:hover span { text-decoration: underline; }

Answer 2

不幸的是，目前无法仅使用CSS选择元素的父级。

你需要诉诸javascript或jQuery。

我个人会在jQuery中做点什么，比如

 $('a>img').parent().addClass('noTextDecoration');

然后在css中有以下内容：

 a.noTextDecoration {test-decoration:none;}

Answer 3

我只是用

img {
    border:none;
}

Answer 4

据我所知，没有办法在CSS中选择元素的父元素。您可以尝试将一些类（即imagelink）应用于包含IMG元素的A元素。

Answer 5

如果这些锚点的href属性始终指向图像，并且除了内部具有img标记的图像之外没有任何锚点指向图像，那么您可以使用：

a[href$=".gif"],
a[href$=".png"],
...            ,
a[href$=".jpg"] {
    text-decoration: none;
}