tbody中first-child选择器失效？无法为首个td.is-active添加圆角

我明白你现在的困扰——想给tbody里第一个带.is-active类的td加圆角，但常规选择器好像不管用对吧？这大概率是因为你用的:first-child或:first-of-type这类选择器有局限性，它们只认元素在父容器里的位置，不管类名。下面给你几种靠谱的解决方案：

方案一：纯CSS选择器（现代浏览器适用） #

如果你的项目不需要兼容太老的浏览器，用这个纯CSS的选择器就能精准选中第一个出现的.is-active td：

tbody {
  /* 选中前面没有其他.is-active td的那个，也就是第一个 */
  td.is-active:not(td.is-active ~ td.is-active) {
    border-radius: 8px; /* 替换成你需要的圆角大小 */
    /* 其他你想加的样式 */
  }
}

这个选择器的逻辑是：td.is-active ~ td.is-active表示“后面跟着另一个.is-active td的元素”，加上:not()就排除了这些，剩下的就是第一个出现的.is-active td。

方案二：兼容旧浏览器的JS+CSS组合 #

如果需要兼容像IE11这类不支持复杂CSS选择器的浏览器，推荐用JS给第一个.is-active td额外加个类，再用类选择器写样式：

第一步：添加JS代码 #

// 找到tbody里第一个.is-active的td
const firstActiveTd = document.querySelector('tbody td.is-active');
// 如果存在的话，给它加个专属类
if (firstActiveTd) {
  firstActiveTd.classList.add('first-active');
}

第二步：SCSS里写样式 #

tbody td.first-active {
  border-radius: 8px;
}

为什么你的原选择器可能失效？ #

比如你可能试过tbody td.is-active:first-child，但这个选择器只在第一个td本身就带.is-active类的时候才生效。如果第一个td没有这个类，第二个td才是.is-active，那这个选择器就找不到目标元素啦。

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