能否使用:nth-child选择器实现双交替样式？

当然可以！完全不用额外加类名，靠:nth-child()就能实现你想要的「双交替」效果——不管是每行4个元素、整行颜色顺序交替（第一行黑/白/黑/白，第二行白/黑/白/黑，循环往复），还是每两个元素一组的色块交替（黑/黑/白/白/黑/黑...），都能做到。

先聊聊你当前的代码：你现在用nth-child(2n)让偶数位元素变白，奇数位变黑，所以每行的色块顺序都是一样的。如果想要「双交替」，我们可以针对不同的循环周期来写选择器：

第一种需求：整行交替色块顺序（两行一个循环） #

如果想要第一行是「黑、白、黑、白」，第二行变成「白、黑、白、黑」，第三行又回到「黑、白、黑、白」，可以用8个元素为一个循环的选择器：

/* 基础样式 */
.parent-div > div {
  float: left;
  width: 25%;
  height: 50px;
  box-sizing: border-box; /* 加这个防止边框/内边撑宽元素 */
  border: 1px solid #ccc; /* 可选，方便看清楚每个元素 */
}

/* 奇数行（第1、3、5...行）的第1、3个元素：黑色 */
.parent-div > div:nth-child(8n+1),
.parent-div > div:nth-child(8n+3) {
  background-color: black;
}

/* 奇数行的第2、4个元素：白色 */
.parent-div > div:nth-child(8n+2),
.parent-div > div:nth-child(8n+4) {
  background-color: white;
}

/* 偶数行（第2、4、6...行）的第1、3个元素：白色 */
.parent-div > div:nth-child(8n+5),
.parent-div > div:nth-child(8n+7) {
  background-color: white;
}

/* 偶数行的第2、4个元素：黑色 */
.parent-div > div:nth-child(8n+6),
.parent-div > div:nth-child(8n+8) {
  background-color: black;
}

/* 清除父元素浮动，避免高度塌陷 */
.parent-div::after {
  content: "";
  display: table;
  clear: both;
}

这里的8n+1意思是：从第1个元素开始，每8个元素重复一次这个样式（比如第1、9、17...个元素），以此类推，就能精准控制每一行的色块顺序。

第二种需求：每两个元素一组交替（黑/黑/白/白循环） #

如果你的「双交替」是指每两个同色元素为一组，那更简单：

.parent-div > div {
  float: left;
  width: 25%;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

/* 第1、2、5、6、9、10...个元素：黑色 */
.parent-div > div:nth-child(4n+1),
.parent-div > div:nth-child(4n+2) {
  background-color: black;
}

/* 第3、4、7、8、11、12...个元素：白色 */
.parent-div > div:nth-child(4n+3),
.parent-div > div:nth-child(4n+4) {
  background-color: white;
}

.parent-div::after {
  content: "";
  display: table;
  clear: both;
}

小提醒 #

别忘了给父元素加清除浮动的样式，不然父元素会因为子元素都是浮动而高度塌陷，影响页面布局。

你可以根据自己的实际需求选择对应的写法，纯CSS就能完美实现~

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