以 css 实现数字样式

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

使用 grid + nth-child + var + calc

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

/* 设置网格容器 */
.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() 函数，根据子元素的位置动态设置颜色。它提供了一种优雅且灵活的方式来展示数字。

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