Question

我正在尝试让Zebra剥离我的桌子，但它无法正常工作。

<style>
tr.campaign:nth-of-type(even)
{
    background:#e0e0e0;
}

tr.campaign:nth-of-type(odd)
{
    background:#f1f1f1;
}

</style>
<table>
<tr class="campaign">
    <td rowspan="2">hey</td>
    <td>row 1</td>
</tr>
<tr>
    <td>row 2</td>
</tr>

<tr class="campaign">
    <td rowspan="2">hey</td>
    <td>row 3</td>
</tr>
<tr>
    <td>row 4</td>
</tr>

</table>

我正在尝试上面的代码。实际上，具有广告系列类的行应该在斑马条中着色，但它也考虑其他行进行着色。因此，广告系列类的第二行的颜色与广告系列类的1row相同，因为第二个广告系列类有2行。

问候。

Answer 1

在选择器级别3中无法执行此操作。:nth-of-type将始终考虑所有tr个兄弟姐妹，而不仅仅是匹配的：

:nth-of-type(an+b)伪类表示法表示在文档树中具有相同扩展元素名称的an+b-1兄弟元素的元素，对于n的任何零或正整数值，并有一个父元素。

在选择器级别4（目前未在任何浏览器中实现）中，将有:nth-match：

:nth-match(an+b of selector-list)伪类表示法表示一个元素，它具有父元素并且具有an+b-1兄弟节点，它们与文档树中的给定选择器列表匹配，对于任何零或正整数值{ {1}}。

资源：

W3C：选择器等级3：:nth-of-type
W3C：选择器等级4：:nth-match

CSS Zebra剥离无法正常工作

1 个答案: