停止将 CSS 'a'样式应用于链接的图像

唯一的静态方法是在图像链接上使用class，如：

<a href='http://whatever.url.here/' class='imglink'>
    <img src='img/image.png' alt='Alt text'>
</a>

然后将CSS样式应用于这个类：

a.imglink:hover {
    border-bottom: 0px solid;
}

您必须在其他a:hover CSS类之后声明这个。

从技术上讲，不能根据元素所包含的元素来设置元素的样式。不能使a元素的边界取决于内部是否存在img元素(这就是您要处理的问题(。使用类会有所帮助，但从评论来看，这似乎是不可能的。

有一个解决方法：将每个图像放在包含元素的底部(默认情况下不在基线上(，并将其向下移动一个像素，或者无论边界宽度如何。这样，只要图像没有透明度，图像就会覆盖底部边界。CSS代码：

a img {
    vertical-align: bottom;
    position: relative;
    top: 1px;
}

这会略微更改所有图像的位置，因此除非采取预防措施，否则可能会影响整体布局。

我建议在链接中添加一个类，这样就可以进行

a.imglink:hover{
  border:0;
}

或者，如果你无法控制该类，你可以尝试在图像上添加负边距，以确保边界不会显示：

a img{
    margin:0 0 -1px 0;
}

该-1px可能需要根据您的其他规则进行调整

下面是一个展示负利润解决方案的小提琴：http://jsfiddle.net/QRXGe/

您的解决方案将需要向包装图像的链接(或任何应该删除边框的链接(添加一个额外的类名。除非你想使用JavaScript技术，否则没有办法进行"反向选择"。

jQuery技术是这样的：

$('a > img').parent().css('border-bottom', 'none');

这将从所有具有直接子代图像的锚标记中删除"border-bottom"样式。但是，您需要在每个页面上都使用它，并且每个页面都会通过该脚本进行解析，因此在每个页面中都会增加一些开销。

否则，如果您可以访问HTML，请创建一个CSS类来针对这些特定链接，例如：

a.img-link{ border-bottom:none; }

并将其应用于图像周围的任何链接，例如：

<a href="#" class="img-link"><img src="#" alt="" /></a>

我希望这能有所帮助！

实现这一点的另一种方法是简单地使链接中的图像relative，然后偏移底部以覆盖边界。5px似乎可以http://jsfiddle.net/ECuwD/

a{
    color: #6A737B;
    text-decoration: none;
}
a:hover{
    border-bottom: 1px solid #C60B46;
    text-decoration: none;
}
a img {
    position:relative;
    bottom: -5px;
}

显然，您想要的是根据内容对同一标记(<a>(进行不同的行为。

遗憾的是，使用纯CSS没有真正的方法来实现这一点，因为这种语言是而不是编程语言，因此缺乏条件结构，如if。

这并不意味着没有解决方案！以下是您可以做的几件事：

1. 在HTML中声明(比如(元素(<a>(应该以不同的方式处理(对于类，在您的情况下是<a class="text">或<a class='image'>

2. 使用JavaScript动态更改您的风格，这意味着基于条件，例如内容。在你的情况下，它可能是这样的：

   function onLoad() {
       for (var element in document.body) {
           // look for links
           // if this is a link:
               // look for image inside link
               // if there is one:
                   // remove the border
       }
   }