React递归HTML结构中，如何仅为含leaf2的branch添加分支伪元素？

方案一：给目标分支添加专属类名（最稳妥） #

在React渲染时，给包含leaf2的branch元素额外加一个专属类（比如branch--target），就能精准定位到该分支：

<div className='branch'>
  <div className='child'>leaf1</div>
  <div className='parent'>
    {/* 给这个branch添加专属类 */}
    <div className='branch branch--target'>
      <div className='child'>leaf2</div>
      <div className='parent'>
        <div className='branch'>
          <div className='child'>leaf3</div>
          <div className='parent'></div>
        </div>
        <div className='branch'></div>
      </div>
    </div>
  </div>
</div>

然后在CSS里仅针对这个专属类添加伪元素样式：

/* 先给所有branch设置相对定位，确保伪元素定位基准正确 */
.branch {
  position: relative;
  margin-left: 30px; /* 预留分支线条的空间 */
}

/* 仅给目标分支添加伪元素 */
.branch--target::before {
  content: '';
  /* 以下是分支形态的示例样式，可按需调整 */
  position: absolute;
  left: -20px;
  top: 0;
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  width: 15px;
  height: 20px;
}

方案二：用CSS层级选择器精准定位（依赖固定结构） #

如果你的HTML结构固定不变，也可以通过层级选择器直接命中包含leaf2的branch：

.branch {
  position: relative;
  margin-left: 30px;
}

/* 选择第一个.parent的直接子branch（即leaf2所在的分支） */
.parent > .branch::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  border-left: 2px solid #333;
  border-top: 2px solid #333;
  width: 15px;
  height: 20px;
}

注意：这个方案依赖DOM结构的固定性，如果后续结构调整（比如新增同级parent），可能会误命中其他分支，因此优先推荐方案一。

内容的提问来源于stack exchange，提问作者Никита Решетняк