我有一個 react 組件，我在其中渲染了一個包含一些資料的串列，一個在另一個下面。我希望每個替代data條目都有不同的背景顏色，所以我決定nth-child在 CSS 中使用selctor。
渲染資料串列的 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);
}
有人可以幫助我理解這種行為以及如何實作我想要的嗎？
預期結果
uj5u.com熱心網友回復：
.tableBody:nth-child(odd)匹配本身是 nth-child 的.tableBody元素。
你只有一個這樣的元素，所以它總是第一個（也是奇怪的）孩子。
如果你想選擇styles.tableRow里面的元素，那么你需要這樣說：
.tableBody > .tableRow:nth-child(odd)
（這里假定的值styles.tableRow是'tableRow'）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/363921.html
標籤：javascript html css 反应 css-选择器
上一篇：在onClick中反應隱式回傳