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

问题描述

| 似乎有些浏览器（至少是Chrome）在嵌套在定位标记内部的图片下方加上了部分下划线，如下所示：

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

因此，我正在寻找一种向包含img标签的锚标签添加ѭ1的方法。我的第一个想法是：

a img {
    text-decoration: none;
}

当然这是行不通的，因为样式将应用于img标签，而不是锚。那么，有没有一个选择器可用于将文本装饰样式应用于带有img子代的任何锚标记？ 编辑： 我的HTML通常如下所示：

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

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

解决方法

        如果您反对在此

<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; }

    ,        不幸的是，目前无法仅使用CSS选择元素的父级。 您将需要使用javascript或jQuery。 我个人会在jQuery中做一些事情

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

然后在CSS中具有以下内容：

 a.noTextDecoration {test-decoration:none;}

    ,        我只是用

img {
    border:none;
}

    ,        据我所知，没有办法在CSS中选择元素的父级。您可以尝试将某些类（即ѭ13applying）应用于包含IMG元素的A元素。     ,        如果这些锚点的href属性始终指向图像，而除了其中实际上带有

img

标记的图像之外，没有锚点指向图像，则可以使用：

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