如何选中容器内指定类的首个子元素（其并非直接首子节点）

示例结构 #

<div class="h">
  <div class="wrapper">wrapper</div>
  <div class="in-convo">I want to select this div ONLY</div>
  <div class="in-convo">2</div>
  <div class="in-convo">3</div>
</div>

方案1：全兼容实现（支持所有主流浏览器） #

通过兄弟选择器做样式覆盖，兼容IE7及以上版本：

/* 给所有直接子级.in-convo设置目标样式 */
.h > .in-convo {
  /* 自定义样式，例如： */
  border: 1px solid blue;
}

/* 覆盖第一个.in-convo之后的所有同层级.in-convo样式，恢复默认 */
.h > .in-convo ~ .in-convo {
  border: none;
}

方案2：现代CSS简洁实现 #

使用CSS4新增的nth-child带范围匹配语法，代码更简洁，无需额外重置：

/* 直接匹配.h子元素中第一个属于.in-convo类的节点 */
.h > :nth-child(1 of .in-convo) {
  border: 1px solid blue;
}

该方案兼容Chrome 111+、Firefox 113+、Safari 9+，无论容器内是否存在.wrapper节点，都可以准确命中第一个.in-convo元素。

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