Css 将此+；在此之后（n&x2B；1）和之前

HTML:

我有一张桌子。每两行是一组。各组交替使用背景色。第1行和第2行为白色。第3行和第4行为灰色。第5行和第6行为白色。等等

---

当您将鼠标悬停在组上时，我想将背景色设置为黄色。我该怎么做？

不确定这是否正是您想要的，但这里有一个使用jQuery和CSS的解决方案。这将是一个更好的跨浏览器解决方案，因为CSS:n子版本还不受所有主流浏览器的支持

jQuery：

//Add group classes to rows
$('table.table_database_edit tr').each(function () {
    if ($('.table_database_edit tr').index($(this)) + 1 !== 1 && ($('.table_database_edit tr').index($(this)) + 1) % 4 === 0) {
        $(this).removeClass('groupOne').addClass('groupTwo');
        $(this).prev().removeClass('groupOne').addClass('groupTwo');
    } else {
        $(this).addClass('groupOne');
        $(this).next().addClass('groupOne');
    }
});

//Highlight groups of two
$('table.table_database_edit tr').hover(function () {
    if ($('.table_database_edit tr').index($(this)) === 0 || $('.table_database_edit tr').index($(this)) % 2 === 0) {
        $(this).addClass('highlight');
        $(this).next().addClass('highlight');
    } else {
        $(this).addClass('highlight');
        $(this).prev().addClass('highlight');
    }
}, function () {
    $('.table_database_edit tr').removeClass('highlight');
});

CSS:

如果需要我调整，请告诉我

---

完整解决方案：

您必须修改HTML或使用javascript。我考虑了一下，我认为答案是‘不’，原因之一

CSS中没有“以前的同级”选择器。在示例代码中，可以使用

之前

和

之后

，但这些psedoo选择器用于插入内容，而不是修改同级的CSS属性

最近的是相邻的兄弟组合符，但它只选择下一个兄弟。有空的。因此，可以在第一行上方高亮显示两行，但在第二行上方高亮显示第一行

我曾考虑过使用类，但同样地，缺少以前的兄弟组合符意味着灾难。除非您为每个分组分配一个唯一的类。这将导致大量冗余的html和css

您需要修改HTML或使用javascript。如果您可以修改HTML，我将放弃该表，改为使用div。如果可以使用javascript，那么实现起来就相对简单

--编辑

---

我不知道你可以在一个表中声明多个tbody。如果您可以修改html，这显然是一种方法。

您要查找的是

tbody

。

tbody

元素类似于

colgroup

，但用于对行进行分组。因此，CSS很简单：

<table class="table_database_edit">
    <tbody>
        <tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>

    <tbody>
        <tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>
</table>

---

您确定您发布了正确的fiddle url吗？只有一行在悬停时高亮显示。我希望这个efect不带JS。我不确定他是想在悬停时单独更改还是作为一个组更改。用第二副手更新答案。作为组和任何组。再次更新答案以适应正确的分组，无论存在多少行。我知道您更喜欢非JS解决方案，但不确定是否可以使用纯CSS创建所需的效果。看看新的提琴。这和我刚想到的一样：没有先前的选择器（它不存在）What's

#display:none打算做什么？CSS注释语法是
/*comment*/
。我认为大多数web浏览器都不接受“tbody”，因为我在Firefox中看到总是添加此标记。如果不插入
tbody
标记，浏览器通常会添加匿名标记。我在大多数表中添加了一个隐式的
tbody
，因为我将根据
th
标记是否出现在
选项卡中、
tbody
或
tfoot
标记中而对其进行不同的样式设置。
//Add group classes to rows
$('table.table_database_edit tr').each(function () {
    if ($('.table_database_edit tr').index($(this)) + 1 !== 1 && ($('.table_database_edit tr').index($(this)) + 1) % 4 === 0) {
        $(this).removeClass('groupOne').addClass('groupTwo');
        $(this).prev().removeClass('groupOne').addClass('groupTwo');
    } else {
        $(this).addClass('groupOne');
        $(this).next().addClass('groupOne');
    }
});

//Highlight groups of two
$('table.table_database_edit tr').hover(function () {
    if ($('.table_database_edit tr').index($(this)) === 0 || $('.table_database_edit tr').index($(this)) % 2 === 0) {
        $(this).addClass('highlight');
        $(this).next().addClass('highlight');
    } else {
        $(this).addClass('highlight');
        $(this).prev().addClass('highlight');
    }
}, function () {
    $('.table_database_edit tr').removeClass('highlight');
});

table.table_database_edit {
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit tr.groupOne {
    background-color: #fff;
}
table.table_database_edit tr.groupTwo {
    background-color: #EFF0F1;
}
table.table_database_edit tr.highlight {
    background-color: yellow;
}

<table class="table_database_edit">
    <tbody>
        <tr><td>Magazyn wycieraczek</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>

    <tbody>
        <tr><td>test</td><td>Edytuj</td><td>Usuń</td></tr>
        <tr class="more" id=""><td colspan="3">aa</td></tr>
    </tbody>
</table>

tr.more{
    #display: none;
}
table.table_database_edit{
    width: 100%;
    border-collapse:collapse;
    border-spacing: 0;
}
table.table_database_edit  tbody:nth-child(odd) tr {
    background-color: #EFF0F1;
}

table.table_database_edit  tbody:hover tr {
    background-color: #FFFFCC;
}