CSS选择器第n个表行

Question

我想用CSS定位以下行：

<tr class="r0"> *this one* 
<tr class="r0"> 
<tr class="r1"> *this one* 
<tr class="r1"> 
<tr class="r0"> *this one* 
<tr class="r0"> 
<tr class="r1"> *this one* 
<tr class="r1"> 
<tr class="r0"> *this one* 
<tr class="r0"> 
<tr class="r1"> *this one* 
<tr class="r1"> 

谢谢！

编辑：

道歉，我已经忘了这里要补充的一个重要组成部分！

有时候，我的表看起来像这样：

<tr class="r0"> 
<tr class="r1"> 
<tr class="r0"> 
<tr class="r1"> 
<tr class="r0"> 
<tr class="r1"> 

而且在这种情况下，我不需要任何目标。所以我只需要定位它，如果它看起来像第一个代码示例。更重要的是，这两个示例具有完全相同的类和ID，因此无法告诉哪一个正在显示。

谢谢！

编辑：

这似乎工作，几乎

tr.r0 + tr.r0 { 
    background-color:red; 
} 

tr.r1 + tr.r1 { 
    background-color:red; 
} 

http://jsfiddle.net/2BVRF/2/也许我可以玩的说了一下。我只需要它来选择前面的元素而不是下面的元素：/

Answer 1

可以匹配第二行，但不是第一个。

.r0 + .r0, 
.r1 + .r1{ 
    background-color: lightgray; 
} 

您可以尝试做这样的事情到对面的匹配。

.r0 + .r0 + .r1, 
.r1 + .r1 + .r0{ 
    background-color: lightgreen; 
} 

但是你可以看到，它不会在第一个元素匹配，因为CSS无法比拟的倒退，它只是向前匹配或向下DOM树。

http://jsfiddle.net/62F4N/

---

但有没有限制，如果你也可以javascript http://jsfiddle.net/62F4N/2/

var els=document.querySelectorAll('tr.r0,tr.r1'); 

for(var i=0; i<els.length; i++){ 
    var el = els[i]; 

    if(el.nextElementSibling && el.className==el.nextElementSibling.className){ 
     el.style.backgroundColor = "lightgreen"; 
    } 
} 

Answer 2

tr:nth-child (odd){ 
    /* Your style */ 
} 

Answer 3

你可以用：nth-​​child选择器来做到这一点。

table tr:nth-child(odd) td { background-color: #ccc; } 

这里的一个工作示例：http://jsfiddle.net/2BVRF/

[编辑＃2：无类]

嗯，抱歉，但是没有办法来选择CSS前面的元素。如果类必须保持不变，您将需要JS来完成此任务。

这个例子使用了jQuery，以便选择与前一个元素：

http://jsfiddle.net/2BVRF/3/

[编辑：OP的新条件]

不幸的是，鉴于需要定位两个中的一个表格，这种方法将不再有帮助。

你最好在表中分配一个类来定位奇数行，这会让你不想单独定位的表格。

更新工作示例：http://jsfiddle.net/2BVRF/1/

Answer 4

根据http://www.w3schools.com/cssref/sel_nth-child.asp你要做到这一点：

tr:nth-child(2) { 
    /* CSS goes here */ 
} 

更多见http://www.w3schools.com/cssref/css_selectors.asp。

Answer 5

我已经在jsfiddle中尝试了下面的代码。它工作正常。

.special tr.r0:nth-child(odd) { 
    background-color:red; 
} 

.special tr.r1:nth-child(odd) { 
    background-color:red; 
} 

Answer 6

我没有为将纯CSS处理第二种情况下的想法，但对于first case你可以使用这样

tr.r0:nth-child(odd){ 
    background-color: red; 
} 
tr.r1:nth-child(odd){ 
    background-color: red; 
} 

demo