第n个孩子：如何挑选元素两种

组比方说，我有一个表是这样的：第n个孩子：如何挑选元素两种

<div class="fc-slats"> 
    <table> 
    <tbody> 
     <tr> 
     <td class="fc-widget-content fc-major">16</td> 
     <td class="fc-widget-content fc-minor">16</td> 
     <td class="fc-widget-content fc-major">17</td> 
     <td class="fc-widget-content fc-major">17</td> 
     <td class="fc-widget-content fc-major">18</td> 
     <td class="fc-widget-content fc-minor">18</td> 
     </tr> 
    </tbody> 
    </table> 
    </div>

而且我要在第一和第二细胞具有一种颜色，第三和第四细胞有另一种颜色，第五和第六个单元格具有第一种颜色......换句话说，它是旧的奇偶交替颜色方案，除了每个组中有两个单元格。

我想用CSS的nth-child选择这样做：

fc-slats td:nth-child(int(n/2)) { 
    background-color: red; 
}

但我不知道究竟如何写的“第n个孩子”选择公式。我想CSS不支持像int那样的数学函数，或者像if... then这样的条件，那么在那种情况下，我将如何实现这一点？

编辑：为简洁起见，我只在表格中添加了6个单元格，但假设表格将具有任意长度;换句话说，我正在寻找一种“通用”解决方案。

来源

2017-04-18 PaulJ

你可能会得到td的列表（例如jquery），并相应地将每个元素设置为奇数或偶数。 – Shiping

@Shiping：我希望有一个非JS的解决方案。如果我必须写Javascript ...我想我必须写它，但我试图探索其他选择。 – PaulJ

您可以选择与其直接前置兄弟一起每四个td与nth-child(4n)和nth-child(4n - 1)：

td { 
 
    background: blue; 
 
} 
 

 
td:nth-child(4n), td:nth-child(4n - 1) { 
 
    background: red; 
 
}

<div class="fc-slats"> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td class="fc-widget-content fc-major">16</td> 
 
     <td class="fc-widget-content fc-minor">16</td> 
 
     <td class="fc-widget-content fc-major">17</td> 
 
     <td class="fc-widget-content fc-major">17</td> 
 
     <td class="fc-widget-content fc-major">18</td> 
 
     <td class="fc-widget-content fc-minor">18</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    </div>

来源

2017-04-18 23:39:27 Purag

谢谢。但是如果我有更长的细胞列表会发生什么？我刚刚为这个例子加了6，但想象一下，如果它是一个任意长度的表格。 – PaulJ

该模式将重复。这意味着如果我们再添加一个以上的单元格，它会被涂成红色。 '4n'中的'n'意味着每四分之一，类似于'4n-1'。你需要不同的效果吗？ – Purag

哦，我没有测试过它。你是对的！谢谢。 – PaulJ

td { 
    background: blue; 
} 

td:nth-child(4n+1), td:nth-child(4n+2) { 
    background: red; 
}

https://jsfiddle.net/2nLtgd9z/

这已经回答了在计算器上，先做你的研究： nth-child to alternate by 2 rows

来源

2017-04-18 23:49:06

您可以将问题标记为重复，而不是再次回答。 – Purag

@Purag我没有这样的声望。 –

道歉！你是对的。 – Purag

第n个孩子：如何挑选元素两种

回答

相关问题