CSS 选择器：几乎是空的？答案

【问题标题】：CSS Selector :almost-empty?CSS 选择器：几乎是空的？
【发布时间】：2013-02-11 07:44:19
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

jQuery('document').ready(function(){
    jQuery("a").each(function(){
        if(this.children.length !== 0)
            this.style.borderBottomWidth='0';
    });
});

【讨论】：

【解决方案2】：

这无法实现，因为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/

【讨论】：

【解决方案3】：

当<a> 的ONLY CHILD 不是img ...

a:only-child:not(img)
{
    border-bottom-width: 1;
}

【讨论】：

这似乎应该有效，但它没有。除了:empty 伪类，我认为文本节点不会被识别为子节点，这让我开始认为如果没有 Javascript，这是不可能的。

【解决方案4】：

与其疯狂的选择器，不如用负边距隐藏边框：

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

Demo

【讨论】：

部分链接图片有透明背景。
您能否为img 设置白色背景，否则看起来会很糟糕？
我可以，但不同的图像需要不同的背景颜色，有些甚至可能是渐变的一部分。如果可能的话，我想避免它，但如果没有其他合理的答案，我可能不得不这样做。

【解决方案5】：

新答案：

如果你想要图片下的边框，而不是文本，这样做：

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

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

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

旧答案：

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

a img { 边框底部：无； }

【讨论】：

下划线在链接上，而不是在图片上
您更新的答案无效。 <a> 标记中有一个文本节点，可防止它被 :empty 伪类选中。

【解决方案6】：

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

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

【讨论】：

因为 img 不会有下划线，但 <a> 链接会是
这不可行。它是 Wordpress，我们正在为一群不知道如何将链接放在特定类中的人开发它。此外，<a> 标签和<img /> 标签上已经有一个text-decoration: none;。问题是有一个底部边框。
@user1813212 好吧，除了尝试教育他们，我不知道该告诉您关于您的用户的什么。 CSS类与恕我直言一样简单。但您也可以应用一个移除底部边框的类。