如何不使用类、ID及JS/jQuery为同级div设置不同背景色？

开发者阿泽

2026-5-26

当然可以！完全不用JavaScript/jQuery，也不用给div加类或ID，纯CSS就能搞定。给你分享几种靠谱的实现方式：

方案1：使用`:nth-child()`选择器

这是最直接的方法，利用元素在父容器中的位置来精准定位，非常适合这种连续排列的元素：

/* 第一个div设置蓝色背景 */
div:nth-child(1) {
  background-color: blue;
  color: #fff; /* 搭配白色文字提升可读性 */
}

/* 第二个div设置黄色背景 */
div:nth-child(2) {
  background-color: yellow;
}

/* 第三个div设置红色背景 */
div:nth-child(3) {
  background-color: red;
  color: #fff;
}

nth-child(n)里的n代表元素的位置序号（从1开始计数），直接对应每个div的排列顺序，就能轻松给每个元素设置不同样式。

方案2：结合`:first-child`/`:last-child`与`:not()`选择器

如果你的div数量固定是3个，这种方式会更语义化：

/* 第一个div */
div:first-child {
  background-color: blue;
  color: #fff;
}

/* 最后一个div */
div:last-child {
  background-color: red;
  color: #fff;
}

/* 选中既不是第一个也不是最后一个的div（也就是中间的） */
div:not(:first-child):not(:last-child) {
  background-color: yellow;
}

这种写法的好处是，哪怕你后续调整了div的内容（只要数量还是3个），样式依然能正确对应到首尾和中间元素。