如何用CSS选中textarea后首个非display:none的同级元素？

你原来的代码失效的核心原因是：:first-of-type是匹配父元素下第一个子元素（因为用了*通配符），但这个元素刚好是display:none的，被:not([style*='display:none'])排除了，自然找不到匹配项。而且就算第一个非隐藏元素不是父元素的第一个子元素，:first-of-type也无法定位它——它只认父元素下同类型的第一个元素，不管前面有没有隐藏元素。

可以用以下两段CSS实现需求：

/* 给textarea之后所有非隐藏元素设置红色 */
textarea ~ *:not([style*='display:none']) {
  color: red;
}
/* 重置第一个非隐藏元素之后的所有非隐藏元素样式 */
textarea ~ *:not([style*='display:none']) ~ *:not([style*='display:none']) {
  color: initial;
}

测试用HTML：

<textarea>Text</textarea>
<div style="display: none">This element will be ignored</div>
<p>This element will be red</p>
<span>This element won't be red</span>
<p>This element won't be red</p>
<div>This element won't be red</div>
<label>This element won't be red</label>

补充说明 #

如果隐藏元素是通过CSS类（比如.hidden）设置的display:none，只需要把选择器里的[style*='display:none']替换成对应的类名即可，比如:not(.hidden)。

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