如何用纯CSS实现表格质数合数行背景颜色?

问题描述

问 题

在css中可以用以下代码控制tr行背景颜色:

tr:nth-child(n) 

nth-child的值可以是包含n的线性公式,也可以是odd和even表示奇数行和偶数行.
然而素数本身是没有规律的,请问怎么实现素数行和偶数行分别设置不同的背景色?

解决方案

tr{background:#fff;}
tr:nth-of-type(1){background:#eee} /* 1 不是质数也不是合数 */
tr:nth-of-type(2n),tr:nth-of-type(3n),tr:nth-of-type(5n){background:#eaa}
tr:nth-of-type(2),tr:nth-of-type(3),tr:nth-of-type(5){background:#fff}

最后两行遍历到根号 x, where x 为 tr 元素的总数。例如如下表格有 30 行。
https://jsfiddle.net/qdzruq16/

用 CSS 3 :not 选择器更简洁:

tr{background:#fff;}
tr:nth-of-type(1){background:#eee}
tr:nth-of-type(2n):not(:nth-of-type(2)),tr:nth-of-type(3n):not(:nth-of-type(3)),tr:nth-of-type(5n):not(:nth-of-type(5)){background:#eaa}

https://jsfiddle.net/qdzruq16/2/

甚至更加简洁:

tr{background:#fff;}
tr:nth-of-type(1){background:#eee}
tr:nth-of-type(2n+4),tr:nth-of-type(3n+6),tr:nth-of-type(5n+10){background:#eaa}

https://jsfiddle.net/qdzruq16/3/

这篇关于如何用纯CSS实现表格质数合数行背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！