如何为.spelers类div绑定不同CSS图片样式，迁移内联样式是否需加ID

核心判断 #

不需要为现有元素新增ID来做样式区分，完全可以基于已有的HTML结构层级、位置选择器完成内联样式的外迁，反而更符合结构与表现分离的开发规范。

操作步骤 #

• 先清空所有.spelers标签上的内联style属性，保留原有容器的类、ID不动
• 将所有内联样式中的差异化参数（left偏移值、雪碧图裁切的background-position值）提取到外部CSS文件中
• 借助现有父容器的类名，配合结构选择器精准匹配每个角色对应的样式规则，不需要新增冗余的类或ID

代码示例 #

修改后的纯结构HTML（已移除所有内联样式） #

<div class="spelers_lijn1" id="spelers_lijn_1">
  <div class="stang"></div>
  <div class="spelers"></div>
</div>
<div class="spelers_lijn2" id="spelers_lijn_2">
  <div class="stang"></div>
  <div class="spelers"></div>
  <div class="spelers"></div>
</div>
<div class="spelers_lijn3" id="spelers_lijn_3">
  <div class="stang"></div>
  <div class="spelers"></div>
  <div class="spelers"></div>
</div>

外部CSS文件内容 #

/* 保留原有.spelers的公共属性 */
.spelers {
  position: absolute;
  width: 30px;
  height: 69px;
  top: 0;
  background-image: url(../images/spelers.png);
}

/* 第1行的角色定位与裁切 */
.spelers_lijn1 .spelers {
  left: 162px;
  background-position: 35px 0;
}

/* 第2行第1个角色 */
.spelers_lijn2 .spelers:nth-child(2) {
  left: 92px;
  background-position: 0 0;
}

/* 第2行第2个角色 */
.spelers_lijn2 .spelers:nth-child(3) {
  left: 232px;
  background-position: -35px 0;
}

/* 第3行第1个角色 */
.spelers_lijn3 .spelers:nth-child(2) {
  left: 112px;
  background-position: -70px 0;
}

/* 第3行第2个角色 */
.spelers_lijn3 .spelers:nth-child(3) {
  left: 212px;
  background-position: -105px 0;
}

补充说明 #

• 不推荐给单个.spelers新增ID：ID的选择器优先级过高，后续需要批量调整角色位置、适配不同屏幕尺寸时，很容易因为ID的优先级问题导致样式覆盖失效，维护成本更高
• 如果觉得:nth-child的选择规则不够直观，也可以给单个.spelers加语义化的修饰类（比如根据角色位置命名.speler--links、.speler--midden），比新增ID的扩展性更好
• 所有公共样式统一收敛在通用类中，差异化参数单独拆分，后续调整裁切位置、角色偏移时只需要改CSS文件，不需要修改HTML结构

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