通过选择子对象将样式应用于父对象

Question

似乎有些浏览器(至少是Chrome浏览器)会在嵌套在锚标签内的图片下加部分下划线，如下所示：

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

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

a img {
    text-decoration: none;
}

当然这是行不通的，因为样式应用于img标记，而不是锚。那么，有没有一个选择器可以用来将文本装饰样式应用于任何具有img子级的锚定标记？

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

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

我对元素进行空格和制表符的方式是在锚标签和图像标签之间添加额外的空格。下划线的是那个空格。

Answer 1

如果您反对向这个<a>标记添加一个类(这是一个简单的解决方案)，那么您的下一个最好的解决方案就是删除<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;
}