使用nth-child保存表格方面（交替行颜色）的样式已更新 [英] Style using nth-child to keep table's aspect (alternating row colors) updated

问题描述

我有一个这样的CSS表：

I have a CSS table like this:

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

(this is a reliable simplification of my system)

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

And I have a CSS like this:

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;
}

目的是：
当一行被隐藏时类隐藏），表的样式应保持不变（每行使用两种不同的颜色）。

The purpose is: When a line is hidden (using the class hide), the styling of the table should remain the same (each line with a different color between the two available). Instead, it get's broken.

根据firefox的firebug，：nth-​​child c $ c>：not ，不是之后（如我想要的）。如何解决？

According to firefox's firebug, the :nth-child is applied before the :not, not after (as I wanted). How can that be solved?

注意：改变HTML是一个不行。这是使用javascript动态生成的东西。

Note: Altering the HTML is a no go. This is something dynamically made using javascript.

我的目的不是计算nth-child隐藏的行，以保持样式，即使行是't visible

My purpose is not to count for the nth-child the lines that are hidden in order to maintain the styling even if the line isn't visible

推荐答案

Pure CSS Answer（CSS3）

是需要考虑的一些谨慎考虑因素（见下文），但似乎有一种方法可以在纯css （注意，fiddle使用了这个假的 div 表，但它可以用真正的html表）使用线性-gradient （找到技术 here ）在表背景上。使 font-size 更改（或缩放）变得灵活的关键是设置 background-size

Pure CSS Answer (CSS3)

There are some careful considerations to take into account (see below), but there does appear to be a way to do this in pure css (note that fiddle uses the fake div table per this post, but it could be done with real html tables) using a linear-gradient with color stops (technique found here) on the table background. The key to make it flexible with font-size changes (or zooming) is to set the height portion of the background-size to twice the line-height set for the rows.

注意事项：

1. line-height 和 font-size 行应使用 em 单位显式设置（除了注释＃5）。


2. 如果表（不推荐）设置 padding 可能需要对 background-position 或 background-clip 进行调整以适应填充。 li>
   
3. 如果顶部或底部填充或 margin 设置在 row ，那么它应该在 em 单位并添加到 line-height 在计算线性梯度高度之前的值。


4. 此技术将在一行内改变背景颜色 （请参阅最后一个表格


5. 如果一些其他固定高度元素在行（图像设置为20px高），则行可根据像素值设置 height和 linear-gradient height。

1. line-height and font-size for row should be explicitly set with em units (except see note #5 below).
2. If padding is set on the table (not recommended) then some type of adjustment to either background-position or background-clip will likely need to be done to accommodate the padding.
3. If top or bottom padding or margin is set on the row then it should be in em units and added to the line-height value before calculating the doubled linear-gradient height.
4. This technique will change color of background within a row if that row has multiple lines in it (see the last table in my example fiddle).
5. If some other fixed height element were in the rows (images set to 20px high), then the row height and linear-gradient height could be set based off pixel values.

我没有花时间玩弄＃2和＃3以上，以确定需要的确切调整，但理论上，如果有必要，应该可以容纳这些事情。

I have not taken the time to play around with #2 and #3 above to figure out for sure the exact adjustments needed, but theoretically it should be possible to accommodate those things if necessary.

这篇关于使用nth-child保存表格方面（交替行颜色）的样式已更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！