如何通过CSS相邻选择器动态在每2n+1个.half-screen元素前插入分隔条？

嘿，这个需求挺有意思的！咱们来拆解一下怎么用CSS相邻选择器（+）来搞定它，顺便修正你现有代码里的小问题～

首先，先指出你当前CSS的问题：你用的嵌套写法&.half-screen + .half-screen + .half-screen会被编译成.container.half-screen + .half-screen + .half-screen，这显然不是你想要的——你需要的是.container下的.half-screen元素之间的相邻关系，而不是给.container加.half-screen类。

方案一：结合相邻选择器与:nth-of-type（推荐，支持动态添加元素） #

因为纯用相邻选择器（+）只能匹配固定数量的前置元素（比如A+B+C只能选第三个元素），没法动态适配新增的元素，所以结合CSS的:nth-of-type伪类是更实用的方案。

你需要的是从第3个开始，所有奇数位置的.half-screen元素前添加分隔条（也就是每两个元素之后的那个元素前），对应的CSS代码如下：

.container {
  /* 可选：给容器加内边距，避免第一个元素顶到容器边缘 */
  padding: 10px 0;
}

/* 选择从第3个开始的所有奇数位置的.half-screen元素 */
.container .half-screen:nth-of-type(2n+1):not(:first-of-type) {
  position: relative;
  /* 给元素添加上边距，留出分隔条的位置 */
  margin-top: 20px;
}

/* 给选中的元素添加:before伪元素作为分隔条 */
.container .half-screen:nth-of-type(2n+1):not(:first-of-type):before {
  content: '';
  /* 分隔条样式 */
  border-top: 1px solid #ccc;
  display: block;
  /* 让分隔条撑满容器宽度 */
  width: 100%;
  /* 把分隔条定位到元素上方的margin区域 */
  position: absolute;
  top: -10px;
  left: 0;
}

方案二：纯用相邻选择器（仅适合固定数量元素，不推荐动态场景） #

如果你一定要纯用相邻选择器，那只能针对固定位置的元素写规则，比如：

.container .half-screen + .half-screen + .half-screen:before {
  content: '';
  border-top: 1px solid #ccc;
  display: block;
  margin: 10px 0;
}

/* 第5个元素前的分隔条 */
.container .half-screen + .half-screen + .half-screen + .half-screen + .half-screen:before {
  content: '';
  border-top: 1px solid #ccc;
  display: block;
  margin: 10px 0;
}

但这种写法的问题很明显：每次新增元素都要加新的选择器，完全不适合动态添加的场景，所以还是方案一更实用。

效果说明 #

最终实现的效果是：

• 第1、2个元素正常排列
• 第3个元素前出现分隔条，第3、4个元素排列
• 第5个元素前再次出现分隔条，以此类推，完美适配动态添加的.half-screen元素

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