1

どうしてこの2つが同等にならないのですか？最初の行は緑色の行を示していますが、2番目の行は表示されていません。唯一の違いはhtmlcにあります。さらに、n番目の子セレクターの特異性は何ですか？

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Test</title>
        <style type='text/css'>
            tr:nth-child(2n+1)
            {
                background-color: red;
            }
            tr.c
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table class='stripe'>
            <tr class='c'>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>

-vs-

<!DOCTYPE html>
<html>
    <head>
        <title>Stripe Test</title>
        <style type='text/css'>
            tr:nth-child(2n+1)
            {
                background-color: red;
            }
            tr .c
            {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <table class='stripe'>
            <tr class='c'>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>
4

3 に答える 3

2

2つ目は、まったく異なるセレクターです。tr .c間にスペースを入れると、祖先要素を持つクラス名「c」の要素が検索され<tr>ます。最初のものは、クラス名「c」を持つ要素をtr.c探します。<tr>

これは特異性とは関係ありませんが、CSSの理解とは関係ありません。

于 2012-05-01T04:58:45.123 に答える
1

tr.c（スペースなし）`はクラスcのテーブル行です。

tr .c（スペース付き）はテーブル行であり、その後にクラスcのその他の指定されていないタグが続きます。

スペースは親子関係を意味します。trタグ自体にクラスがあるので、その下にcクラスを持つ子はありません。trc

于 2012-05-01T04:59:15.413 に答える
-1

代わりに :nth-child(odd) を使用することを検討してください。また、IE はそれをまったく好まないことにも注意してください。

于 2012-05-01T05:02:29.187 に答える