如何用 CSS 实现美观且灵活的数字显示样式？

以 css 实现数字样式

你是否想知道如何利用 css 编写如图所示的数字？通常的做法是使用多个 div 标签作为背景，并为 0-9 每个数字预设一个 class，用于元素变色。但除此之外，还有一种更优雅的写法：

使用 grid + nth-child + var + calc

QIMI奇觅

美图推出的游戏行业广告AI制作与投放一体化平台

下载

/* 设置网格容器 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}

/* 设置数字样式 */
.num {
  width: 4em;
  height: 4em;
  border: 1px solid #000;
  text-align: center;
  line-height: 4em;
  font-size: 2em;
}

/* 使用 nth-child 和 var() 设置不同数字的背景和颜色 */
.num:nth-child(1) {
  background-color: var(--n-0);
  color: var(--t-0);
}
.num:nth-child(2) {
  background-color: var(--n-1);
  color: var(--t-1);
}
.num:nth-child(3) {
  background-color: var(--n-2);
  color: var(--t-2);
}
.num:nth-child(4) {
  background-color: var(--n-3);
  color: var(--t-3);
}
.num:nth-child(5) {
  background-color: var(--n-4);
  color: var(--t-4);
}
.num:nth-child(6) {
  background-color: var(--n-5);
  color: var(--t-5);
}
.num:nth-child(7) {
  background-color: var(--n-6);
  color: var(--t-6);
}
.num:nth-child(8) {
  background-color: var(--n-7);
  color: var(--t-7);
}
.num:nth-child(9) {
  background-color: var(--n-8);
  color: var(--t-8);
}

/* 设置颜色变量 */
:root {
  --n-0: #000;
  --t-0: #fff;
  --n-1: #fff;
  --t-1: #000;
  --n-2: #000;
  --t-2: #fff;
  --n-3: #fff;
  --t-3: #000;
  --n-4: #000;
  --t-4: #fff;
  --n-5: #fff;
  --t-5: #000;
  --n-6: #000;
  --t-6: #fff;
  --n-7: #fff;
  --t-7: #000;
  --n-8: #000;
  --t-8: #fff;
}

这种写法利用 nth-child 选择器和 calc() 函数，根据子元素的位置动态设置颜色。它提供了一种优雅且灵活的方式来展示数字。

立即学习“前端免费学习笔记（深入）”；