table表格使用:nth-child()实现隔行变色与对齐

admin CSS 2022-02-05 15:35:22 table nth-child"

核心代码





    
    
    
    table2n



    
    
        月份 理财 工资  稿费 总收入 生活 购物 话费 交通 总支出
        一月 100 200 400 700 200 500 100 200 1000
        二月 300 400 100 800 50 70 200 30 350
        三月 20 1000 200 1220 130 92 20 43 285
        四月 125 72 128 325 42 13 20 200 275

        五月 100 200 400 700 200 500 100 200 1000
        六月 300 400 100 800 50 70 200 30 350
        七月 20 1000 200 1220 130 92 20 43 285
        八月 125 72 128 325 42 13 20 200 275

月份	理财	工资	稿费	总收入	生活	购物	话费	交通	总支出
一月	100	200	400	700	200	500	100	200	1000
二月	300	400	100	800	50	70	200	30	350
三月	20	1000	200	1220	130	92	20	43	285
四月	125	72	128	325	42	13	20	200	275
五月	100	200	400	700	200	500	100	200	1000
六月	300	400	100	800	50	70	200	30	350
七月	20	1000	200	1220	130	92	20	43	285
八月	125	72	128	325	42	13	20	200	275

效果图

对于上面的实例，仅仅设置了隔行颜色，在阅读时不容读错行，但是同一行的数据还是比较混乱的。
这时候借助css的:nth-child()子选择器添加不同的样式可以设置不同的列不同的显示效果。

        tr>td:nth-child(-n+5) {
            color: green;
            text-align: right;
        }
        tr>td:nth-child(n+6) {
            color: red;
            text-align: right;
        }
        tr>td:nth-child(1) {
            font-weight: bold;
            color: black;
            text-align: center;
        }
        tr>td:nth-child(5),tr>td:nth-child(10) {
            font-weight: bold;
        }

效果图

添加样式之后可以更轻松的判读数据，区分类别，月份加粗，红色代表支出，绿色代表收入等等。

根据css的介绍，:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。
需要注意一点，第一个子元素就是1，而不是从0开始。比如上面设置第一列月份的样式，:nth-child参数为1。

 tr>td:nth-child(1) {
            …
        }

此外还可以使用常量odd和even，分别代表奇数和偶数。比如隔行背景色就是这样设置的。

tr:nth-child(even){
            background: #eee;
        }

使用公式可以实现连续选择或着偏移选择。使用公式 (an + b)表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
下面的设置与使用even等同效果。

tr:nth-child(2n){
            background: #eee;
        }

而2n+1则与odd等同效果

tr:nth-child(odd){
            background: #eee;
        }

2n+1

tr:nth-child(2n+1){
            background: #eee;
        }

只是用n+b则代表连续选择。

tr>td:nth-child(-n+5) {
            …
        }

-n+b是进阶用法的一种，从第一个开始选择，而n+b是从末尾向前选择。
为什么是-n呢？其实从公式-n + 5 ≥ 0可以推出n ≤ 5，也就是代表1~5。

下面是补充

CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。
Table表格奇偶数行定义样式:

语法：

:nth-child(an+b)

为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。

描述：

伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。

第一种：简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子：

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种：倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种：反向倍数分组匹配