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

Question

我有一个反应组件，我在其中渲染一个包含一些数据的列表，一个在另一个下面。我希望每个备用 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);
}

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

想要的结果

Answer 1

.tableBody:nth-child(odd) 匹配 .tableBody 个本身第 n 个子元素的元素。

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

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

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

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

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

n-th child selector not working in react map render function

html

javascript

css

css-selectors

reactjs