CSS nth-child没有达到预期的效果

Question

我正在尝试动态创建一个表。 并相应地更新单元格值。 这些值是异步返回的，因此它们理论上可以引用任何列。 根据情况，列数可以随时变化，但表的此部分的行数是常量（7）。

 td { border: 1px solid black; } .dummyTable td.components:nth-child(5n+2) { color: red; } 

 <table class="dummyTable" style="display: table;"> <tbody> <tr> <th style="background-color:#898b8c; color:white">A</th> <th style="background-color:#898b8c; color:white">B</th> <th style="background-color:#898b8c; color:white">C</th> <th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">37</th> <th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">38</th> <th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">36</th> <th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">39</th> <th style="background-color: rgb(137, 139, 140); padding-left: 10px; padding-right: 10px; cursor: pointer;">40</th> </tr> <tr> <td rowspan="3">A</td> <td>B</td> <td>C</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #fff082 ">1</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #4fefa4 ">0</td> </tr> <tr> <td>B</td> <td>C</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #4fefa4 ">0</td> <td style="background-color: #4fefa4 ">0</td> </tr> <tr> <td></td> <td style="background-color:#d5e7ed;">Total</td> <td id="37" style="background-color:#d5e7ed">0</td> <td id="38" style="background-color:#d5e7ed">1</td> <td id="36" style="background-color:#d5e7ed">0</td> <td id="39" style="background-color:#d5e7ed">0</td> <td id="40" style="background-color:#d5e7ed">0</td> </tr> <tr> <td rowspan="7">S</td> <td rowspan="7">E</td> <td>s1</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#fff082">2</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> </tr> <tr> <td>s2</td> <td class="components" style="background-color:#fff082">1</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> </tr> <tr> <td>s3</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#fff082">3</td> <td class="components" style="background-color:#fff082">3</td> <td class="components" style="background-color:#fff082">4</td> </tr> <tr> <td>s4</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#fff082">1</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> </tr> <tr> <td>s5</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#fff082">1</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> </tr> <tr> <td>s6</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> </tr> <tr> <td>s7</td> <td class="components" style="background-color:#fff082">1</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> <td class="components" style="background-color:#4fefa4">0</td> </tr> </tbody> </table> 

我想与第n个孩子一次更新一列。 我的想法是，我需要知道的是表中有多少列，以及我当时处理的列。

例如，如果有5列，n将是5我认为常量将修改我正在谈论的列。

即5n + 1应更新5列圆柱的第1列。 并且3n + 2应该修改3个圆柱表的第2列。

我所指的列是具有“组件”类的列。

我认为我遇到的问题是我不确定“组件”单元格是如何编入索引的。 即它们是逐行还是逐列。

我在考虑数学中的第n项公式：

因此，如果在这种情况下公式为5n + 0：

我想象第一个突出显示的单元格将是5：5（1）+ 0 = 5然后下一个突出显示的单元格索引将是10：5（2）+ 0 = 10

我也不确定他们是从零指数还是1开始。

除了第一行之外，这个过程对我来说都是有用的。 但是当我在片段中进行测试时，它似乎并没有完全按照我预期的方式移动。

（注意）我修改了示例以获取原始返回表的一部分，代码在CSS而不是jQuery中，而不是修改值，我在这里更改颜色。 这是为了简单，因为我认为这不会影响逻辑。

Answer 1

它在“Total”之后的第一行没有按预期工作，因为该行中有七列。 td.components:nth-child(5n+2)只会将其样式应用于第二个孩子（如果该孩子匹配td.components ），然后每第5个孩子应用于第二个孩子， td.components是每个第5个孩子也匹配td.components 。

但是，它仍然会计算其他孩子。 在第一行中，您有两个rowspan="7"列。 因此它计算这两个，不将样式应用于第二列，因为它没有.components类，然后计算5列，并将样式应用于该列，因为它确实具有类.components 。

在以下行中，至少在标记中 ，每个行只有6列，因此每行的第2列获取应用的样式，因为每个行中具有类.components的第2列。

因此，如果您希望不计算前两列，则需要将它们放在自己的行中或使用一些不同的逻辑，例如集成:not()选择器或其他东西。

或者，如果你想使用jQuery来应用这些样式，你可以这样做，只需告诉循环忽略Total行之后的第一行并将特定样式应用于该行。