如何为匹配复杂CSS选择器的元素应用nth-of-type伪类？

问题根因 #

nth-of-type()计数规则是先按相同标签名统计同层级元素的顺序，再匹配前面的选择器过滤，而非先匹配前面的选择器再对匹配结果计数。
你给出的DOM结构中，同层级的第二个<div>类名为someclass2，不满足.someclass[name="somename"]的过滤条件，因此 .someclass[name="somename"]:nth-of-type(2) {}选不到任何元素。

解决方案 #

方案1：使用CSS :nth-child() 的of语法（推荐，现代浏览器兼容） #

该语法可以直接在你指定的选择器匹配结果中计数，完全符合你的需求：

:nth-child(2 of .someclass[name="somename"]) {
  /* 你需要的样式 */
  color: red;
}

该语法兼容Chrome 111+、Firefox 113+、Safari 15.4+，覆盖目前90%以上的全球用户。

方案2：手动加自定义类（兼容全浏览器） #

直接给匹配到的第二个符合要求的元素加一个专用类，比如second-match，再写样式：

.second-match {
  /* 你需要的样式 */
}

这是兼容性最好、性能最优的实现方式。

方案3：JS动态匹配（兼容全浏览器，适合DOM动态生成场景） #

如果元素是动态渲染的，无法提前加类，可以用JS选中目标元素添加样式或类：

// 选中所有符合条件的元素
const targetList = document.querySelectorAll('.someclass[name="somename"]');
// 取第二个元素（索引从0开始，所以取1）
if (targetList.length >=2) {
  // 直接加样式
  targetList[1].style.color = 'red';
  // 或者加类
  // targetList[1].classList.add('second-match');
}

内容的提问来源于stack exchange，提问作者Alex Fatun