:nth-​​child()为什么选择不存在的子代?

时间:2018-06-20 14:44:20

标签: css css-selectors

我正在尝试渲染这样的表:

Header1 | Header2 Header3
-------------------------
Text1   | Text2   Text3
Text1   | Text2   Text3
Text1   | Text2   Text3
Text1   | Text2   Text3
-------------------------
Text1   | Text2   Text3
Text1   | Text2   Text3
Text1   | Text2   Text3
Text1   | Text2   Text3

前四行(不计算标题)始终存在。最后第四行是可选的。如果不存在分隔线,则也不应绘制分隔线。

我的第一个想法是使用此CSS选择器:

.mytable tr:nth-child(6) > td {
    border-top: 1px solid black;
}

从理论上讲,如果存在第6条线,选择器将选择它并在其上方绘制一条线(边框)。如果不存在,则首先没有任何选择。

但是实际上,即使我使用9作为:nth-child()选择器的值,也会绘制边框。值为10时,将不再绘制边框。即使我将表编辑为仅包含前六行(并将:nth-child()设置为九行),也是这样。

这种奇怪行为的原因是什么。有什么办法可以解决这个问题?

编辑: 根据要求包括HTML(Mako)代码。它比较复杂,但基本上可以简化为:

<table class="mytable">
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
    </tr>
    <tr>
        <th>Text1</th>
        <td>Text2</td>
        <td>Text3</td>
    </tr>
    <tr>
        <th>Text1</th>
        <td>Text2</td>
        <td>Text3</td>
    </tr>
    <tr>
        <th>Text1</th>
        <td>Text2</td>
        <td>Text3</td>
    </tr>
    <tr>
        <th>Text1</th>
        <td>Text2</td>
        <td>Text3</td>
    </tr>

    % for index in range(4):
        <tr>
            <th>Text1</th>

            % for text in texts:
                <td>${text}</td>
            % endfor
        </tr>
    % endfor
</table>

0 个答案:

没有答案