blocks|key|5265153|text|我最终只使用了jQuery。我不相信现在仅仅使用CSS是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5265154|jQuery('document').ready(function(){
++++jQuery("a").each(function(){
++++++++if(this.children.length+!==+0)
++++++++++++this.style.borderBottomWidth='0';
++++});
});|code-block|syntax|javascript|5265155|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I ended up just using jQuery. I don't believe it's possible with just CSS right now.

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

blocks|key|5747480|text|如果我正确理解您的问题，您正在尝试使您的超链接图像不带下划线。如果是这样，为什么不这样做：a+img+{+text-decoration:none+}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5747481|编辑：如果你不想给img标签上的链接加下划线，请使用text-decoration:none对这些链接应用一个类|BOLD|5747482|entityMap^0|19|U|0|0|3|Q|K|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|N|8|@$9|O|A|P|B|H]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|I|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|J|$]]

If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: <code>a img { text-decoration:none }</code>?

Edit: If its the links on img tags you don't want underlined, apply a class to those links with <code>text-decoration:none</code>

blocks|key|719698|text|与其使用疯狂的选择器，不如用负边距隐藏边框：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|719699|a+img+{
++margin-bottom:+-6px;
}|code-block|syntax|javascript|719700|Demo|offset|length|719701|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/utBzh^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Instead of a crazy selector, why not hide the border with a negative margin:

<pre><code>a img {
 margin-bottom: -6px;
}
</code></pre>

<a href="http://codepen.io/anon/pen/utBzh" rel="nofollow">Demo</a>

blocks|key|5747505|text|当<a>的唯一子不是img时...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|5747506|a:only-child:not(img)
{
++++border-bottom-width:+1;
}|code-block|syntax|javascript|5747507|entityMap^0|1|3|A|3|5|3|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|U|8|@]|E|@]|F|$J|K]]|$1|L|3|-4|5|6|7|V|8|@]|E|@]|F|$]]]|M|$]]

When the ONLY CHILD of <code>&lt;a&gt;</code> is not an <code>img</code> ...

<pre><code>a:only-child:not(img)
{
 border-bottom-width: 1;
}
</code></pre>

blocks|key|1914044|text|这是无法实现的，因为在锚点最顶端的框之外应用和呈现border属性的方式-实际上，使用边框实现这种效果的唯一方法就是取消该属性。有时在视觉上不能接受用背景色的底边框覆盖锚的底边框-这是不可靠的做法，让人皱眉。也许这个效果可以用滤镜来模拟，但我不会指望它有足够好的跨浏览器支持。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1914045|我建议的是回到text-decoration属性*，同时仍然保持不同的、独立的下划线颜色--总体上是一种整洁的方法，但不是没有额外元素的开销：|1914046|<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>|code-block|syntax|javascript|1914047|http://jsfiddle.net/ovfiddle/TwmmF/3/|1914048|entityMap|0|LINK|mutability|MUTABLE|url^0|P|6|0|7|F|0|0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

This cannot be accomplished because of the way <code>border</code> property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.

What I propose is going back to the <code>text-decoration</code> property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:

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

<a href="http://jsfiddle.net/ovfiddle/TwmmF/3/" rel="nofollow">http://jsfiddle.net/ovfiddle/TwmmF/3/</a>

I'm aware that the <code>:empty</code> pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.

I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.

I've tried <code>a *:not(*){ border-bottom-width: 0; }</code> in an attempt to fix this, but it didn't work. Is there a way to select <code>a</code> tags with only text-nodes for children?

CSS Selector :almost-empty?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道:empty伪类将选择所有没有子节点的元素，但我只希望选择具有文本节点作为子节点的元素。我的超级链接有一个与文本颜色不同的下边框，但这是一个问题，因为超级链接的图像也会有下划线。我尝试过a *:not(*){ border-bottom-width: 0; }来解决这个问题，但是它不起作用。有没有办法为子节点选择只包含文本节点的a标签？

问CSS选择器:几乎为空？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS选择器:几乎为空？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS选择器:几乎为空？
EN