通过选择子项将样式应用于父项答案

【问题标题】：Applying Style to Parent By Selecting Child通过选择子项将样式应用于父项
【发布时间】：2011-05-27 18:25:04
【问题描述】：

似乎某些浏览器（至少是 Chrome）在嵌套在锚标记内的图像下添加了部分下划线，如下所示：

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

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

a img {
    text-decoration: none;
}

当然这不起作用，因为样式会应用于 img 标签，而不是锚点。那么是否有一个选择器可以用来将 text-decoration 样式应用于任何带有 img child 的锚标记？

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

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

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

【问题讨论】：

标签： html css

【解决方案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; }

【讨论】：

【解决方案2】：

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

您需要使用 javascript 或 jQuery。

我个人会在 jQuery 中做一些类似的事情

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

那么在css中有以下内容：

 a.noTextDecoration {test-decoration:none;}

【讨论】：

【解决方案3】：

我只是用

img {
    border:none;
}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

如果这些锚点的href属性总是指向图片，并且没有锚点指向图片，除了里面实际上有img标签的图片，那么你可以使用：

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

【讨论】：