CSS:我想在容器中单独定位每个孩子

时间:2013-04-22 17:24:50

标签: html css css3 css-selectors

我想为每个<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}

2 个答案:

答案 0 :(得分:9)

使用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;
}

<强> jsFiddle example

答案 1 :(得分:5)

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

http://jsfiddle.net/ayTmy/