css - CSS nth Selectors 表格行

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

您可以使用 :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 2

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

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

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

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

我不知道第二种情况可以用纯 CSS 处理，但first case你可以像这样使用

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

演示

Answer 6

我在 jsfiddle 中尝试了以下代码。它工作正常。

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

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