You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

是否存在可选中嵌套结构中每第2个.letter元素的CSS选择器?

CSS隔项选中嵌套层级.letter元素的实现方案

你这种逐层单嵌套的结构可以通过CSS选择器实现隔项选中,由于所有.letter元素都没有同级同类型元素,所以无法直接使用:nth-child系列选择器,可采用以下两种方案:

方案1:全兼容写法(无浏览器兼容问题)

直接按嵌套层级叠加选择器,匹配偶数层级的.letter即可,不需要依赖任何CSS新特性:

/* 依次匹配第2、4、6、8...层的.letter元素,可根据实际嵌套层数增减规则 */
.firstname > .letter > .letter,
.firstname > .letter > .letter > .letter > .letter,
.firstname > .letter > .letter > .letter > .letter > .letter > .letter,
.firstname > .letter > .letter > .letter > .letter > .letter > .letter > .letter > .letter {
  /* 此处写你要应用到偶数项的样式,示例为修改背景色 */
  background: rgba(255, 0, 0, 0.2);
}

该方案的原理是每两层嵌套叠加一对.letter >选择器,精准匹配偶数深度的嵌套元素。

方案2:通用简洁写法(需浏览器支持CSS :has()选择器)

如果你的业务场景兼容2023年及之后发布的主流浏览器(Chrome 105+、Firefox 121+、Safari 15.4+),可以用:has()选择器实现不限制嵌套层数的通用匹配:

/* 匹配所有偶数层级的.letter元素,无需关心嵌套总层数 */
.letter:has(> .letter > .letter),
.firstname > .letter > .letter {
  background: rgba(255, 0, 0, 0.2);
}

补充说明:如果你不想手动写层级选择器,也可以通过极少量JS递归遍历所有.letter元素,给偶数层级的元素加自定义类实现,性能几乎无损耗,同时兼容所有浏览器。

内容的提问来源于stack exchange,提问作者Sebastian Nielsen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 19:57:02