8

我知道:empty伪类将选择所有没有子元素的元素，但我只想选择带有文本节点的元素作为子元素。

我的超链接上有一个与文本颜色不同的下边框，但这是一个问题，因为超链接的图像也有这个下划线。

我试图a *:not(*){ border-bottom-width: 0; }解决这个问题，但没有奏效。有没有办法a为孩子选择只有文本节点的标签？

4

6 回答 6

1

如果我正确理解您的问题，您正试图避免您的超链接图像被加下划线。如果是这样，为什么不做类似的事情：a img { text-decoration:none }？

编辑：如果您不想在 img 标签上添加下划线，请将类应用于这些链接text-decoration:none

于 2013-02-26T00:50:04.013 回答
1

新答案：

如果您想要图像下方的边框，而不是文本，请执行以下操作：

一个 img { 边框底部：1px 实心 #000; }
a:emtpy { 边框：无；}

如果你想要相反的（文本下的边框但不是图像下的边框），请执行以下操作：

a:empty {border-bottom:1px solid #000; }
一个 img { 边框：无；}

旧答案：

如果这只是包装在标签中的图像的问题，请尝试：

一个 img { 边界底部：无；}
于 2013-02-26T00:51:11.290 回答
1

为什么不使用负边距隐藏边框，而不是疯狂的选择器：

a img {
  margin-bottom: -6px;
}

演示

于 2013-02-26T01:06:05.653 回答
0

当唯一<a>的孩子不是img...

a:only-child:not(img)
{
    border-bottom-width: 1;
}
于 2013-02-26T01:03:18.990 回答
0

这无法实现，因为border属性在锚的最顶部框之外应用和呈现的方式 - 实际上，使用边框实现这种效果的唯一方法是否定属性。有时，使用背景颜色的底部边框覆盖锚点的底部边框在视觉上是可以接受的——这是一种不可靠的做法，令人不悦。也许可以使用过滤器来模拟效果，但我不会指望它得到足够好的跨浏览器支持。

我的建议是回到text-decoration属性 *同时仍然保持不同的、独立的下划线颜色 - 总体上是一种简洁的方法，但并非没有额外元素的开销：

<style>
.fancy-underline { color:blue; text-decoration:underline; } 
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
  <img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>

http://jsfiddle.net/ovfiddle/TwmmF/3/

于 2013-02-26T03:53:24.023 回答
0

我最终只使用了 jQuery。我不相信现在只有 CSS 是可能的。

jQuery('document').ready(function(){
    jQuery("a").each(function(){
        if(this.children.length !== 0)
            this.style.borderBottomWidth='0';
    });
});
于 2013-02-26T18:53:05.260 回答