html – CSS：我想在容器中单独定位每个孩子

发布时间：2020-12-14 18:53:46 所属栏目：资源来源：网络整理

导读：我想为每个 td分配单独的颜色.一种解决方案是使用类,但如果存在简单的CSS选择器解决方案,我不想挤占 HTML. HTML： tr tdItem 1/td tdItem 2/td tdItem 3/td tdItem 4/td/tr CSS： /* item #1 */{color: red}/* item #2 */{color: blue}/* item #3 */{color:

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

解决方法

使用CSS的第n个子选择器：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!