代码之家 › 专栏 › 技术社区 › adardesign

css3/jquery选择器通过:nt-child()选择器将2行的样式组设置为

css3 css-selectors jquery-selectors jquery

0

adardesign · 技术社区 · 15 年前

我有一个 <table> 数据按2分开 <tr> 的

所以我想将行(每两行)的样式设置为斑马条纹,但每一组2都应该设置样式。

我正在尝试以下方法:

 tr:nth-child(3n+1), tr:nth-child(4n+1){background:#f7f7f7;}

我更喜欢CSS3解决方案,但如果只有jquery可以做到,那就好了。

请看 demo here (可通过jsFiddle编辑):

我试着玩CSS技巧 nth-child-tester 但我没办法弄到。

问题是,我如何斑马风格的每一套(2)TR的(行)

3 回复 | 直到 15 年前

1

2

sje397 15 年前

Here 是一个分叉,每对行都有样式。

我必须修改颜色才能看到任何东西。

您需要使用(4N+1)和(4N+2)。

2

1

Matthew Manela 15 年前

这对你有用吗?

tbody tr:nth-child(4n+1){background:#f00;}
tbody tr:nth-child(4n+2){background:#f00;}
tbody tr:nth-child(4n+3){background:#0f0;}
tbody tr:nth-child(4n+4){background:#0f0;}

这将使一对行交替为红色和绿色。

3

1

You 15 年前

这两种方法都可以:

tr:nth-child(4n+1), tr:nth-child(4n+1)+tr {  }
tr:nth-child(4n+1), tr:nth-child(4n+2) {  }