Question

为什么这两个不相同？第一个显示绿色行，而第二个显示绿色行。唯一的区别在于html c此外，nth-child选择器的特异性是什么？

<!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>

Answer 1

第二个是完全不同的选择器。中间有空格的tr .c查找具有类名“c”且具有祖先<tr>元素的元素。第一个tr.c查找具有类名“c”的<tr>元素。

这与特异性无关，而是与CSS的理解。

Answer 2

tr.c（没有空格）`是类c的表格行。

tr .c（带空格）是一个表格行，后跟一些带有类c的其他未指定标记。

空间意味着父/子关系。由于您已经将c类 ON 设置为tr标记本身，因此tr下面没有c类的子项。

Answer 3

考虑使用：nth-child（odd）代替，并注意IE根本不喜欢它。

css3 n-child特异性

3 个答案: