如何按相对位置选择同一类别的子元素？

你遇到的问题我完全理解——用:nth-of-type()伪类的时候，它是基于元素类型的位置来计数的，而不是基于类的出现顺序。所以一旦.subhead的兄弟元素位置变化，比如中间的非.subhead元素数量改变，原来的:nth-of-type(1)、:nth-of-type(3)这类选择器就会失效。

遗憾的是，CSS本身并没有原生的:nth-of-class()伪类（专门按类的出现顺序计数），不过我们有几个可靠的解决方案：

方案1：纯CSS相邻兄弟选择器（兼容性最好） #

这个方法利用CSS的相邻兄弟选择器~来覆盖样式，不管.subhead在兄弟中的具体位置，都能选中前三个：

div.scrl_can * {
  height:25px;
  border: 1px solid black;
}
/* 第一个.subhead 设为蓝色 */
.subhead {
  background-color: blue;
}
/* 所有在第一个.subhead之后的.subhead 设为绿色（即第二个及以后） */
.subhead ~ .subhead {
  background-color: green;
}
/* 所有在第二个.subhead之后的.subhead 设为黄色（即第三个及以后） */
.subhead ~ .subhead ~ .subhead {
  background-color: yellow;
}
/* 如果有第四个及更多.subhead，恢复默认背景色（可选） */
.subhead ~ .subhead ~ .subhead ~ .subhead {
  background-color: initial;
}

原理很简单：后出现的样式规则会覆盖前面的，所以第一个.subhead应用蓝色，第二个会被绿色覆盖，第三个被黄色覆盖，第四个及以后可以重置回默认。

方案2：JavaScript方案（最灵活，适合复杂场景） #

如果需要更精确的控制，或者要支持动态添加的.subhead，用JavaScript来选择并设置样式会更可靠：

// 获取所有带有.subhead类的元素
const subheadElements = document.querySelectorAll('.scrl_can .subhead');

// 给前三个元素分别设置背景色
for (let i = 0; i < Math.min(3, subheadElements.length); i++) {
  switch(i) {
    case 0:
      subheadElements[i].style.backgroundColor = 'blue';
      break;
    case 1:
      subheadElements[i].style.backgroundColor = 'green';
      break;
    case 2:
      subheadElements[i].style.backgroundColor = 'yellow';
      break;
  }
}

这个方法完全不依赖DOM结构，只要元素带有.subhead类，就会按顺序选中前三个，哪怕中间插入了任意数量的其他元素都没问题。

方案3：现代CSS :has()伪类（简洁但依赖浏览器支持） #

如果你的目标浏览器支持:has()（目前Chrome 105+、Firefox 121+、Safari 15.4+都已支持），可以用这个更直观的写法：

div.scrl_can * {
  height:25px;
  border: 1px solid black;
}
/* 第一个.subhead：后面至少有两个.subhead */
.subhead:has(~ .subhead ~ .subhead) {
  background-color: blue;
}
/* 第二个.subhead：前面有一个、后面至少有一个.subhead */
.subhead:has(~ .subhead):not(:has(~ .subhead ~ .subhead)) {
  background-color: green;
}
/* 第三个.subhead：前面有两个.subhead */
.subhead:not(:has(~ .subhead)):has(.subhead ~ .subhead) {
  background-color: yellow;
}

它直接基于.subhead的兄弟关系来判断是第几个，逻辑更贴近你想要的“按类的出现顺序计数”。

你可以根据自己的浏览器兼容性要求和场景选择合适的方案，替换原来的CSS代码后，不管.subhead在父元素中的具体位置如何，前三个都会被正确选中。

备注：内容来源于stack exchange，提问作者Gary