巧用css实现数字样式
问题：
如何利用css巧妙地创建如图所示的数字样式？
回答：
立即学习“前端免费学习笔记（深入）”；
方案一：
我们可以采用div标签创建背景灰色。为0-9设置对应的class，通过改变这些元素的颜色来实现。
方案二：
使用grid + nth-child + var + calc组合的方式：
/* 创建9x9的网格 */
.grid {
display: grid;
grid-template-columns: repeat(9, 1em);
grid-template-rows: repeat(9, 1em);
width: 9em;
height: 9em;
}
/* 设置每个网格元素的背景颜色 */
.grid > * {
background-color: #ccc;
}
/* 使用nth-child和calc设置数字样式 */
.grid > :nth-child(2n+1) {
background-color: var(--color);
}
.grid > :nth-child(3n+1) {
background-color: var(--color);
}
.grid > :nth-child(4n+1) {
background-color: var(--color);
}
.grid > :nth-child(5n+1) {
background-color: var(--color);
}
.grid > :nth-child(6n+1) {
background-color: var(--color);
}
.grid > :nth-child(7n+1) {
background-color: var(--color);
}
.grid > :nth-child(8n+1) {
background-color: var(--color);
}
.grid > :nth-child(9n+1) {
background-color: var(--color);
}
/* 设置不同的数字样式 */
.num0 {
--color: #000;
}
.num1 {
--color: #f00;
}
.num2 {
--color: #0f0;
}
.num3 {
--color: #00f;
}
.num4 {
--color: #f0f;
}
.num5 {
--color: #0ff;
}
.num6 {
--color: #f0f;
}
.num7 {
--color: #0f0;
}
.num8 {
--color: #000;
}
.num9 {
--color: #f00;
}在线演示：
https://codepen.io/mannix-zho...
