1

nth-of-child スタイルを表のセルに適用しようとしていますが、うまくいきません。私のコードによると、2番目のセルの内容をそれぞれ右揃えにし、灰色にしたいと考えています。しかし、そのスタイルは何の効果もありません。

コードは次のとおりです。

<!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セレクターのようなものはありません。あなたは2つとセレクターを一緒: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 に答える