如何为表格中首个.gold/.silver/.bronze行添加CSS样式

要实现仅为首次出现的.gold、.silver、.bronze类<tr>添加样式，可以利用CSS的后续兄弟选择器结合:not()伪类，完美适配你提到的两种特殊情况，具体代码如下：

/* 为第一个.gold行添加样式 */
tr.gold:not(.gold ~ .gold) {
  background-color: #ffd700;
  /* 其他自定义样式 */
}

/* 为第一个.silver行添加样式 */
tr.silver:not(.silver ~ .silver) {
  background-color: #c0c0c0;
  /* 其他自定义样式 */
}

/* 为第一个.bronze行添加样式 */
tr.bronze:not(.bronze ~ .bronze) {
  background-color: #cd7f32;
  /* 其他自定义样式 */
}

原理说明 #

• .gold ~ .gold：匹配所有在第一个.gold元素之后的同类别<tr>，也就是AJAX注入的重复行。
• :not(.gold ~ .gold)：排除上述后续的重复行，最终只会选中页面中第一个出现的.gold行，不管它前面是否存在.my-rank行。
• 同理，.silver和.bronze的选择逻辑完全一致，不受其他类别行的干扰。

为什么之前的伪选择器无效？ #

• :first-child：仅当目标元素是父容器的第一个子元素时生效，如果前面有.my-rank行，第一个.gold就不是first-child，会失效。
• :first-of-type：匹配同类型元素的第一个，这里所有<tr>都是同类型，所以会选中第一个<tr>（如果是.my-rank就不符合需求），无法精准定位到第一个.gold/.silver/.bronze。

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