CSS斑马剥离不能正常工作

问题描述

我尝试为我的表格使用Zebra剥离，但它无法正常工作。

I am trying to have Zebra stripping for my table but it is not working properly.

<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>

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

I am trying with above code. Actually rows with campaign class should be colored in zebra strips but it is considering other rows too for coloring. Thus, second row with campaign class is colored with same color as that of 1row with campaign class due to 2 rows above second campaign class.

回答。 b $ b

推荐答案

在选择器级别3中没有办法。：nth-​​of-type 将总是考虑所有 tr 兄弟姐妹，不仅仅是匹配的：

There's no way to do this in Selectors level 3. :nth-of-type will always take all tr siblings into account, not only those that are matched:

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

In Selectors level 4 (which is currently not implemented in any browser) there will be :nth-match:

• W3C：选择器第3级：


• W3C： 4：

• W3C: Selectors Level 3: :nth-of-type
• W3C: Selectors Level 4: :nth-match

这篇关于CSS斑马剥离不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！