将“nth-of-child”应用于表格单元格的困难答案

【问题标题】：Difficulties with application of "nth-of-child" to table cells将“nth-of-child”应用于表格单元格的困难
【发布时间】：2012-04-26 22:14:27
【问题描述】：

我正在尝试将 nth-of-child 样式应用于表格单元格，但这不起作用。根据我的代码，我希望每个第二个单元格内容右对齐并具有灰色。但是那种风格没有任何效果。

代码如下：

<!DOCTYPE html>
<html>
<head><title>test table centerring</title></head>
<body>
<style type="text/css">
    td:nth-of-child(2) {
        text-align: right;
        color: #ccc;
    }
</style>

<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Name 1</td>
            <td>Value 1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Name 2, Name 2, Name 2, Name 2</td>
            <td>Value 2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Name 3</td>
            <td>Value 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Name 4</td>
            <td>Value 4, Value 4, Value 4, Value 4</td>
        </tr>
    </tbody>
</table>        
</body></html>

我尝试了不同类型的规范来修改对象类型：“td”、“tr td”、“table tbody tr td”没有任何影响我的表。

我还尝试使用 ID 来识别表格并将样式应用于 id - 这也无济于事。

附：我在IE9、Chrome、FF中测试过

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

没有:nth-of-child 选择器之类的东西。您似乎将两个 :nth-child 和 :nth-of-type 选择器混合在一起...

【讨论】：

非常感谢，有帮助！我的坏我没有注意到差异

【解决方案2】：

tr td:nth-child(2) {
    text-align: right;
    color: #ccc;
}

DEMO.

【讨论】：