html - CSS:我想在一个容器中分别定位每个 child

标签 html css 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}

最佳答案

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

关于html - CSS:我想在一个容器中分别定位每个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16153032/

相关文章:

html - 在 CSS 选择器中使用标签名称可以吗?

html - 选项卡式导航中 ^ 选择器的含义

CSS 选择器 - 使所有标题大写

html - 客户 wordpress 网站上的奇怪文本工件

html - 如何仅将背景颜色添加到主要元素而不是 :before and :after

html - 这种格式对于 HTML 中的选取框是否正确?

jquery - 菜单在特定高度后固定

java - 如何创建 HTML 文件表格以供下载?

html - 3 个等宽的 Div 在 Div 内居中(干净无 float )

CSS 自动高度 Div 无法正确定位自身