1

我正在尝试将 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 - 这也无济于事。

PS 我在 IE9、Chrome、FF 中测试过

4

2 回答 2

3

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

于 2012-04-26T22:18:56.093 回答
0 
tr td:nth-child(2) {
    text-align: right;
    color: #ccc;
}​

演示。

于 2012-04-26T22:20:16.610 回答