如何选择兄弟文本节点后的首个元素？能否为指定元素设红色样式？

完全可以把文本C之后的首个<span>D</span>设置为红色，用CSS的结构选择器就能轻松搞定，我给你一步步说明：

首先先把你的HTML结构明确一下：

<div> 
  <span>A</span> 
  <span>B</span> 
  C 
  <span>D</span> 
  <span>E</span> 
</div>

核心思路 #

你要找的<span>D</span>是div容器里的第三个span元素（前两个span分别对应A和B），同时它也是文本C之后的第一个元素，所以我们可以用CSS的:nth-of-type()选择器精准定位它。

对应的CSS代码 #

/* 选中div下的第三个span元素，也就是显示D的那个 */
div span:nth-of-type(3) {
  color: red;
}

为什么这个选择器有效？ #

:nth-of-type(n)会选中父元素下的第n个同类型子元素，在你的结构里：

• 第1个span是A
• 第2个span是B
• 第3个span就是D
• 第4个span是E

所以这个选择器刚好命中你要的目标元素，设置color: red后，D就会变成红色，而其他元素不受影响。

如果你的HTML结构后续可能有变动（比如前面新增span），只要D始终是文本C之后的第一个span，也可以换一种思路：先找到文本C前面的最后一个span（也就是B），再选中它之后的第一个span——不过因为文本节点无法被CSS选择器直接选中，这种场景下还是:nth-of-type()最直接好用。

内容的提问来源于stack exchange，提问作者Toleo