假设我有一个这样的表:
<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;
}
但我不知道如何准确地编写“nth-child”选择器的公式。我想 CSS 不支持数学函数,比如int
,或类似条件if... then
,那么在这种情况下,我将如何实现这一目标?
编辑:为了简洁起见,我刚刚在此表中添加了 6 个单元格,但假设该表将具有任意长度;换句话说,我正在寻找一个“通用”解决方案。
您可以选择每四个td
以及它的前一个兄弟nth-child(4n)
and 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)