如何复用通用CSS代码？减少nth-child选择器代码冗余方案

实用解决办法 #

1. 用Sass/Scss预处理器循环生成（最省心）

预处理器的循环能一键搞定重复代码，先定义颜色列表，再统一提取公共样式：

// 把26种颜色按顺序放进这个列表
$border-colors: rebeccapurple, blue, green, orange, pink, teal, 
                cyan, magenta, yellow, black, gray, lightgray,
                darkblue, darkgreen, darkred, violet, indigo,
                salmon, gold, silver, brown, olive, maroon,
                navy, lime, purple;

body {
    background-color:#DFE1E1;
    font-family:sans-serif;
    margin-left:30%;
}

// 所有h1的公共样式只写一次
h1 {
  color: red;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
  border:5px solid; // 边框样式统一，颜色单独赋值
}

// 循环生成每个h1的边框颜色
@for $i from 1 through length($border-colors) {
  h1:nth-child(#{$i}) {
    border-color: nth($border-colors, $i);
  }
}

@keyframes animate{
  0%{
    width: 0;
  }
  100%{
    width:250px;
  }
}

2. 原生CSS结合自定义属性（不用预处理器也能省代码）

先给父元素定义颜色变量，再用nth-child匹配对应变量：

修改后的HTML

<!-- 在父容器里定义26个颜色变量 -->
<div style="--color-1: rebeccapurple; --color-2: blue; --color-3: green; 
            --color-4: orange; --color-5: pink; --color-6: teal;
            /* 这里补充剩下20个颜色变量，格式--color-n: 颜色值; */">
  <h1>A&nbsp;for&nbsp;Apple</h1>
  <h1>B&nbsp;for&nbsp;Blue</h1>
  <h1>C&nbsp;for&nbsp;Car</h1>
  <!-- 后续h1元素 -->
</div>

优化后的CSS

body {
    background-color:#DFE1E1;
    font-family:sans-serif;
    margin-left:30%;
}

h1 {
  color: red;
  border:5px solid;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
}

// 匹配每个h1对应的颜色变量
h1:nth-child(1) { border-color: var(--color-1); }
h1:nth-child(2) { border-color: var(--color-2); }
h1:nth-child(3) { border-color: var(--color-3); }
/* 继续补充到h1:nth-child(26) */

@keyframes animate{
  0%{
    width: 0;
  }
  100%{
    width:250px;
  }
}

这种写法把公共代码全提取了，只保留颜色差异部分，比原写法简洁很多。

3. JavaScript动态设置（适合颜色需要动态调整的场景）

如果颜色列表可以提前准备，用JS批量设置更高效：

保留公共CSS

body {
    background-color:#DFE1E1;
    font-family:sans-serif;
    margin-left:30%;
}

h1 {
  color: red;
  border:5px solid;
  overflow:hidden;
  animation: animate 5s ease-in 1 forwards;
}

@keyframes animate{
  0%{
    width: 0;
  }
  100%{
    width:250px;
  }
}

新增JS代码

// 26种颜色按顺序排列
const borderColors = [
  'rebeccapurple', 'blue', 'green', 'orange', 'pink', 'teal',
  'cyan', 'magenta', 'yellow', 'black', 'gray', 'lightgray',
  'darkblue', 'darkgreen', 'darkred', 'violet', 'indigo',
  'salmon', 'gold', 'silver', 'brown', 'olive', 'maroon',
  'navy', 'lime', 'purple'
];

// 遍历所有h1，设置对应颜色
document.querySelectorAll('h1').forEach((el, index) => {
  el.style.borderColor = borderColors[index];
});

内容的提问来源于stack exchange，提问作者Richard