CSS斑马剥离不能正常工作 [英] CSS Zebra stripping not working properly

问题描述

我尝试为我的表格使用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:

：nth-​​of-type（an + b）伪类符号表示具有 an + b-1 在文档树中对于任何零或正整数值 n 具有相同展开元素名称的兄弟元素，并且具有父元素。

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.

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

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

：nth-​​match（a + b of selector- / code>伪类符号表示一个元素，该元素具有父元素并且在文档中的给定选择器列表之前具有 an + b-1 对于 n 的任何零或正整数值

:nth-match(an+b of selector-list) pseudo-class notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

• W3C：选择器第3级： ：nth-​​of-type


• W3C： 4： ：nth-​​match

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

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