第 n 个子选择器在反应地图渲染功能中不起作用

Posted 2023-03-05

【中文标题】第 n 个子选择器在反应地图渲染功能中不起作用

【英文标题】：n-th child selector not working in react map render function

【发布时间】：2022-01-02 02:43:30

【问题描述】：

我有一个反应组件，我在其中渲染一个包含一些数据的列表，一个在另一个之下。我希望每个备用 data 条目都有不同的背景颜色，所以我决定在 CSS 中使用 nth-child 选择器。

呈现数据列表的 JSX 代码

<div className=styles.tableBody>
  tableRowsData.filter(filterMatch).map((row, rowIdx) => (
    <div
      key=rowIdx
      className=styles.tableRow
    >
      <div className=styles.value>row.url</div>
      <div className=styles.value>row.startTime</div>
      <div className=styles.value>row.endTime</div>
      <div className=styles.value>row.status</div>
      <div className=styles.value>row.score</div>
    </div>
  ))
</div>

输出

CSS 试用 1

当我使用以下 CSS 时，我得到的背景颜色是 white。

.tableBody:nth-child(odd) 
  background-color: var(--primary-red);

CSS 试用 2

当我使用以下 CSS 时，我得到的背景颜色是 red。

.tableBody:nth-child(even) 
  background-color: var(--primary-red);

CSS 试用版 3

当我使用以下 CSS 时，我得到的背景颜色是 red。而不是只获得具有红色背景颜色的2nd 卡片。

.tableBody:nth-child(2) 
  background-color: var(--primary-red);

CSS 试用 4

当我使用以下 CSS 时，每张备用卡和每张偶数卡的奇数子卡的背景颜色为 red。

.tableBody :nth-child(odd) 
  background-color: var(--primary-red);

有人可以帮我理解这种行为以及如何实现我想要的吗？

期望的结果

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码，最好是Stack Snippet。见How to create a Minimal, Reproducible Example

我认为你可能想要.tableBody :nth-child(even)

@Paulie_D 我已更新我的问题以包含您的建议的结果。

【参考方案1】：

.tableBody:nth-child(odd) 匹配 它们自己第 n 个子元素的 .tableBody 元素。

你只有一个这样的元素，所以它总是第一个（也是奇数的）孩子。

如果你想选择里面有styles.tableRow的元素，那么你需要这样说：

.tableBody > .tableRow:nth-child(odd)

（这里假设styles.tableRow 的值为'tableRow'）。