如何使用纯CSS为与前序元素属性值不同的元素设置样式？

可以实现，但需要基于已知的foo属性值编写选择器——因为CSS目前无法直接动态匹配“当前元素属性值与前序元素不同”的通用场景（无法引用当前元素的属性值来和前序元素做对比）。

针对你提供的DOM结构的解决方案 #

你的示例中foo属性值固定为1、2、3，可以通过相邻兄弟选择器结合属性选择器实现需求：

/* 先给所有含foo属性的div添加目标样式（示例为顶部红色边框） */
div[foo] {
  margin: 10px 0;
  padding: 10px;
  border-top: 2px solid #ff4444;
  background: #f5f5f5;
}

/* 重置掉与前序元素foo值相同的元素的样式 */
div[foo="1"] + div[foo="1"],
div[foo="2"] + div[foo="2"],
div[foo="3"] + div[foo="3"] {
  border-top: none;
}

效果说明 #

• 初始时所有div[foo]都会被添加上顶部边框；
• 相邻且foo值相同的后续元素（比如id=2、4、6、7）会被重置掉边框；
• 最终只有id=3（前序foo=1，当前foo=2）、id=5（前序foo=2，当前foo=3）会保留目标样式，完全符合你的需求。

局限性 #

如果foo的属性值是动态生成或未知的（比如可能出现任意数值/字符串），纯CSS无法完成这个需求，此时需要借助JavaScript遍历元素，判断相邻元素的foo值并添加类名来控制样式。

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