html - CSS：我想在容器中分别定位每个孩子

Question

我想为每个<td>. 一种解决方案是使用类，但如果存在简单的 CSS 选择器解决方案，我不想拥挤 HTML。

HTML：

<tr>
  <td>Item 1</td>
  <td>Item 2</td>
  <td>Item 3</td>
  <td>Item 4</td>
</tr>

CSS：

/* item #1 */
{color: red}

/* item #2 */
{color: blue}

/* item #3 */
{color: green}

score 9 · Accepted Answer

使用 CSS 的nth-child选择器：

td:nth-child(1) {
    color:blue;
}
td:nth-child(2) {
    color:red;
}
td:nth-child(3) {
    color:brown;
}
td:nth-child(4) {
    color:green;
}

score 5 · Accepted Answer

您可以使用nth-child选择器指定特定元素（从 1 开始计数）：td:nth-child(1) { color: red; }

2 回答 2