html - 选择器 :nth-child without a break?

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

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