React中:first-child伪类为何作用于全部元素？如何仅给首行加顶边框？

问题原因 #

你当前的写法里，每个<User>组件渲染出的<tr>内部只有一个<td class="user-row">，这个td在它的父元素<tr>里永远是第一个子元素，所以CSS中的.user-row:first-child会匹配每一个td，导致所有行都显示顶部边框。

解决方案 #

方案一：父组件传递首行标识（最直观可控）

1. 在渲染<User>的父组件里，给第一个子组件传递isFirst属性：

{/* 假设父组件中用户列表为users数组 */}
{users.map((user, index) => (
  <User 
    key={user.id} 
    user={user} 
    color="blue"
    isFirst={index === 0}
  />
))}

2. 修改User组件，根据isFirst给td添加额外类名：

import React from "react";
import styles from "./User.module.css";

const User = (props) => {
  return (
    <tr className={styles.user} onClick={(e) => {
      e.target.classList.toggle(styles[`toggle-${props.color}`])}}>
      {/* 条件添加首行样式类 */}
      <td className={`${styles["user-row"]} ${props.isFirst ? styles["first-row"] : ""}`}>
        <div>{props.user}</div>
      </td>
    </tr>
  );
};

export default User;

3. 在CSS Modules中添加首行样式，同时删除原有的.user-row:first-child规则：

.user {
    text-transform: capitalize;
    padding: 0.5rem 0;
    cursor: pointer;
}
.user-row{
    width: 100%;
    border-bottom: solid 2px black;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding-left: 1rem;
}
/* 新增首行样式 */
.first-row {
    border-top: solid 2px black;
}
.toggle-blue {
    background-image: var(--blue);
    color: #fff;
}

方案二：通过父容器层级选择器控制（纯CSS方式）

如果所有<User>组件都在同一个<tbody>下，可以直接在父容器层面写选择器：

1. 给父容器<tbody>添加CSS Modules类名：

<tbody className={styles.userList}>
  {/* 这里渲染所有User组件 */}
</tbody>

2. 在CSS Modules中替换原有的.user-row:first-child规则：

.userList tr:first-child .user-row {
    border-top: solid 2px black;
}

这种方式不需要修改User组件的逻辑，直接通过上层容器的选择器精准命中第一个行的td。

注意 #

不要再用.user-row:first-child，这个选择器的作用范围是每个<tr>内部的第一个子元素，而不是整个列表的第一个<td>，这是你之前出错的核心点。

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