Question

我试图将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>

我已经尝试了不同类型的规范，要修改的对象类型：＆＃34; td＆＃34;，＆＃34; tr td＆＃34;，＆＃34; table tbody tr td＆＃34;什么都不影响我的桌子。

我还尝试使用ID来识别表格并将样式应用于id - 这也没有帮助。

P.S。我已经在IE9，Chrome，FF中进行了测试

Answer 1

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

Answer 2

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

DEMO.

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

2 个答案: