CSS基础 | 利用纯CSS筛选素数（未使用JavaScript）

最近拜读张偶老师的《CSS3艺术》，发现原来以前不怎么重视的CSS也可以制作许多特效，比如下面的利用CSS来筛选素数。值得好好学习学习！

效果图

HTML代码

<figure class="prime-number">
			<div></div>
			......省略98个div
			<div></div>
		</figure>
	

CSS代码

.prime-number{
			width: 400px;
			height: 400px;
			display: grid;
			grid-template-columns: repeat(10,1fr);
			counter-reset: n;
		}
		.prime-number div{
			counter-increment: n;
			position: relative;
			width: 30px;
			height: 30px;
		}
		.prime-number div::before{
			content: counter(n);
			position: absolute;
			width: inherit;
			height: inherit;
			background: lightgreen;
			border-radius: 50%;
			text-align: center;
			line-height: 30px;
		}
		/*把数字2,3,5,7标明为素数*/
		.prime-number div:nth-child(2)::before,
		.prime-number div:nth-child(3)::before,
		.prime-number div:nth-child(5)::before,
		.prime-number div:nth-child(7)::before,
		/*选中所有<div>元素(都认为是素数)，后面跟随5个：not()选择器，用于排除不是素数的数*/
		.prime-number div:not(:nth-child(1)):not(:nth-child(2n)):not(:nth-child(3n)):not(:nth-child(5n)):not(:nth-child(7n))::before{
			background: orange;
		}