如何为表格中首个is-sticky类的<td>元素单独设置样式？

要实现只为第一个带有is-sticky类的<td>元素应用样式，后续同类别元素不生效，可以使用CSS的否定伪类结合相邻兄弟选择器精准定位目标元素：

/* 仅选中第一个.is-sticky的td元素 */
td.is-sticky:not(.is-sticky ~ .is-sticky) {
  /* 示例样式，可根据需求修改 */
  background-color: #f5f5f5;
  border-right: 2px solid #ddd;
}

原理说明 #

• .is-sticky ~ .is-sticky 会匹配所有位于第一个.is-sticky元素之后的同类别<td>
• :not() 伪类会排除掉这些后续元素，最终仅对第一个带is-sticky类的<td>应用样式

这种写法不受表格中普通<td>数量的影响，无论前面有多少个非粘性列，都能准确选中第一个粘性列。

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