html - 选择器：nth-​​child 没有休息？

Question

我有这个示例 html 代码。

<table>
    <tbody>
        <tr class="test"><td>Test</td></tr>
        <tr><td></td></tr>
        <tr class="test"><td>Test</td></tr>
        <tr class="test"><td>Test</td></tr>
    </tbody>
</table>

我的CSS代码如下：

table tbody tr.test:nth-child(2n+1) {
    background-color: #ff00ff;
}

输出是错误的:(

似乎与没有类的 tr 有一个休息。 *为什么！？*

看看jsfiddle.net：http://jsfiddle.net/Bubelbub/rFddk/

先感谢您！

Answer 1

不，相反，trwith no class 不会影响:nth-child()：从这个意义上说，它永远不会被“破坏”。如果这个元素是其父元素的第 n 个子元素，那么它就是第 n 个子元素，无论它有/没有什么类或者它是什么元素类型等等。.test选择器中的存在仅仅意味着“这个元素必须有要匹配的类”。由于该元素没有类，因此不会应用规则，就这么简单。