如何实现对所有层级.card元素按全局顺序应用:nth-of-type样式？

方案1：使用CSS :nth-child(of <selector>) 语法（推荐，现代浏览器支持） #

这是最直接的纯CSS方案，专门解决跨层级元素的顺序选择问题。它会在整个文档范围内筛选出所有.card元素，然后按出现顺序匹配第N个：

/* 全局第1个.card */
.card:nth-child(1 of .card) {
  background-color: red;
}

/* 全局第2个.card */
.card:nth-child(2 of .card) {
  background-color: green;
}

/* 全局第3个.card */
.card:nth-child(3 of .card) {
  background-color: blue;
}

/* 全局第4个.card */
.card:nth-child(4 of .card) {
  background-color: yellow;
}

目前Chrome、Firefox、Safari的最新版本都支持这个语法，不需要额外依赖。

方案2：JavaScript 动态标记类名（兼容旧浏览器） #

如果需要兼容IE这类不支持新CSS语法的浏览器，用JS遍历所有.card元素，按全局顺序给它们添加专属类名：

// 获取所有.card元素，按DOM出现顺序排序
const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
  card.classList.add(`card-seq-${index + 1}`);
});

然后在CSS中对应类设置背景色：

.card-seq-1 { background-color: red; }
.card-seq-2 { background-color: green; }
.card-seq-3 { background-color: blue; }
.card-seq-4 { background-color: yellow; }

这个方法兼容性拉满，逻辑也简单易懂。

方案3：CSS计数器变通方案（纯CSS兼容旧浏览器） #

如果不想用JS，可以用CSS计数器结合属性选择器的方式，不过步骤稍繁琐：

/* 初始化全局计数器 */
body {
  counter-reset: card-counter;
}

/* 每个.card递增计数器，并将值存入自定义属性 */
.card {
  counter-increment: card-counter;
  --card-order: counter(card-counter);
}

/* 利用自定义属性匹配对应顺序的元素 */
.card:nth-of-type(n) {
  background-color: red; /* 默认第一个颜色 */
}
.card[style*="--card-order: 2"] {
  background-color: green;
}
.card[style*="--card-order: 3"] {
  background-color: blue;
}
.card[style*="--card-order: 4"] {
  background-color: yellow;
}

注意：部分旧浏览器可能不支持自定义属性，所以这个方案的兼容性不如JS方案。

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