CSS nth选择器表行

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

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

Answer 2

您可以使用：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 3

您可以匹配第二行但不匹配第一行。

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