如何在存在额外div时为其前一个最后一个div添加border-bottom

要实现「仅当存在额外div时，给该额外div的前一个最后一个div添加border-bottom」的需求，有两种实用方案，结合你的React代码示例如下：

方案一：CSS条件选择器（适合动态渲染的额外div） #

假设你通过条件判断（比如{isExtraVisible && <div className={classes.extra}>...</div>}）在card_body内添加额外div，可通过条件类名+CSS伪类实现：

1. 先在CSS中定义目标样式：

/* 当card_body存在has-extra类时，选中倒数第二个子div */
.card_body.has-extra > div:nth-last-child(2) {
  border-bottom: 1px solid #e0e0e0; /* 替换为你需要的边框样式 */
}

2. 在React组件中，根据额外div的存在状态给card_body添加类：

<div className={`${classes.card_list}`}>
  <div className={`${classes.card_list_title}`}>
    <p>Əlavə olunan tarix</p>
    <p>Kart</p>
  </div>

  {/* 这里根据isExtraVisible状态添加has-extra类 */}
  <div className={`${classes.card_body} ${isExtraVisible ? classes.has_extra : ''}`}>
    <div>
      <p>21.02.2023</p>
      <p>11.25</p>
    </div>
    <div>
      <h3>4098****5656</h3>
      <p>Leo</p>
    </div>
    <div className={`${classes.card_type}`}>{visa}</div>
    <div>
      <button>{threeDots}</button>
    </div>
    {/* 条件渲染的额外div */}
    {isExtraVisible && <div className={classes.extra}>额外内容</div>}
  </div>
</div>

如果你的项目不需要兼容旧版浏览器（比如仅支持Chrome 101+），也可以直接用CSS的:has()选择器，省去条件类名：

/* 当card_body包含.extra类的子元素时，选中倒数第二个子div */
.card_body:has(> .extra) > div:nth-last-child(2) {
  border-bottom: 1px solid #e0e0e0;
}

方案二：React直接控制目标元素类名 #

如果你能明确指定「前一个最后一个div」的具体元素（比如示例中按钮所在的div），可以直接给该元素添加条件类：

1. CSS定义边框样式：

.border-bottom {
  border-bottom: 1px solid #e0e0e0;
}

2. 在React中给目标元素添加条件类：

<div className={`${classes.card_body}`}>
  {/* 其他元素保持不变 */}
  <div className={`${isExtraVisible ? classes.border_bottom : ''}`}>
    <button>{threeDots}</button>
  </div>
  {/* 条件渲染的额外div */}
  {isExtraVisible && <div className={classes.extra}>额外内容</div>}
</div>

选择建议 #

• 若额外div的位置不固定（可能插在任意位置但始终是最后一个子元素），优先用方案一，通用性更强。
• 若目标元素固定，方案二更直接，性能也略好。

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