如何用CSS选择排除指定类的首个可见子元素？

你遇到的核心问题是：原CSS中的:first-child仅会匹配父元素的第一个子元素，当这个子元素带有.HideWidget类时，:.field:not(.HideWidget):first-child就无法匹配到后续符合条件的元素，因此只有第二个.child里的"Four"被选中。

兼容大部分浏览器的解决方案 #

可以通过“先统一设置，再排除后续元素”的思路实现需求：

/* 先将所有不带HideWidget类的field设为红色 */
.parent .child .field:not(.HideWidget) {
  color: red;
}
/* 把第一个符合条件的field之后的同类型元素恢复默认颜色 */
.parent .child .field:not(.HideWidget) ~ .field:not(.HideWidget) {
  color: initial;
}

代码示例 #

完整的HTML结构：

<div class='parent'>
  <div class='child'>
    <div class='field HideWidget'>One</div>
    <div class='field'>Two</div>
    <div class='field'>Three</div>
  </div>
  <div class='child'>
    <div class='field'>Four</div>
    <div class='field'>Five</div>
    <div class='field'>Six</div>
  </div>
  <div class='child'>
    <div class='field HideWidget'>Seven</div>
    <div class='field'>Eight</div>
    <div class='field'>Nine</div>
  </div>
</div>

原理说明 #

1. 第一行CSS选中所有.child容器下不带.HideWidget类的.field元素，统一设置红色文本；
2. 第二行CSS利用兄弟选择器~，选中那些前面已经出现过不带.HideWidget类的.field元素，将它们的文本颜色恢复为初始值，最终只有每个.child下第一个符合条件的元素会保持红色。

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