使用nth-child样式以保持表格的外观（交替行颜色）更新

Question

使用nth-child样式以保持表格的外观（交替行颜色）更新

4

我有一个像这样的CSS表格：

（这是我系统的可靠简化版）

<div class="table">
    <div class="row">
        <div class="data">
        abc
        </div>
    </div>
    <div class="row">
        <div class="data">
        def
        </div>
    </div>
    <div class="row">
        <div class="data">
        ghi
        </div>
    </div>
    <div class="row">
        <div class="data">
        jkl
        </div>
    </div>
</div>

我有一个这样的CSS：

div.table div.row:not(.hide):nth-child(2n){
    background-color: #D7D4DA;
}
div.table div.row:not(.hide):nth-child(2n+1){
    background-color: #E4E8EB;
}

.hide{
    display:none;
}

目的是：当一行被隐藏（使用hide类），表格的样式应该保持不变（每一行在两个可用之间具有不同的颜色）。但实际上，它会被破坏。

根据Firefox的Firebug，:nth-child应用在:not之前，而不是之后（我想要的）。如何解决这个问题？

注意：修改HTML是不可行的。这是使用JavaScript动态生成的内容。

我的目的不是为了计算隐藏的行的nth-child，以便即使该行不可见也能保持样式。

- brunoais

我看到你前几天发布了这个问题，但我无法解决。你可能想使用JavaScript / jQuery来解决它。 - elclanrs

6

你不能改变伪类的评估顺序。在任何给定元素上，复合选择器中的所有内容都是“同时”进行评估的。参见这个答案的解释。另外，很抱歉你不得不忍受一个输出 CSS 表格而明显应该是 HTML 表格的脚本。 - BoltClock

@BoltClock♦ 谢谢，伙计。看来我得使用类来标记两种颜色的节点，并使用js在隐藏线条时更改类。再次感谢。 - brunoais

你能否添加CSS使其看起来像你想要的表格，这样我们就可以花时间解决问题而不是基本布局。谢谢。 - Deadlykipper

没有 CSS 解决方案。CSS 没有准备好处理这种特定情况。唯一的解决方法是使用 JavaScript。我使用 nth-child，然后当有隐藏内容时，我用 js 覆盖它。 - brunoais

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

纯CSS答案（CSS3）

需要考虑一些细节问题（见下文），但是似乎有一种方法可以使用纯CSS来实现这一点（请注意，示例中使用了假的div表格，但是它也可以使用真正的HTML表格），在table背景上使用带有颜色停止的linear-gradient（该技术在此处找到here）。使其与font-size更改（或缩放）具有灵活性的关键是将background-size的高度部分设置为行设置的line-height的两倍。

注意事项：

row的line-height和font-size应该明确使用em单位进行设置（除非参见下面的注释＃5）。
如果在table上设置了padding（不建议这样做），则可能需要对background-position或background-clip进行某种调整以适应填充。
如果在row上设置了顶部或底部的padding或margin，则应该使用em单位并将其添加到计算加倍的linear-gradient高度之前的line-height值中。
如果该行有多行文本（请参阅我的示例fiddle中的最后一个表格），则此技术将更改行内的背景颜色。
如果行中有其他固定高度的元素（图像设置为20px高），则可以根据像素值设置row高度和linear-gradient高度。

我还没有花时间去尝试调整上述的第二和第三个问题，以确定确切的调整所需，但从理论上讲，如果必要的话应该是可能的。