CSS实现全局首个与末个.highlighted元素差异化样式的动态方案

问题原因 #

你原来的代码失效是因为:first-child/:last-child是基于元素的直接父元素进行匹配的。在你的HTML结构中，每个.highlighted都包裹在独立的<td>里，每个<td>只有这一个<span>子元素，所以所有.highlighted都会被匹配为父元素的first-child和last-child，导致全部显示红色背景，无法区分全局首尾元素。

方案1：纯CSS（需浏览器支持:has()选择器） #

如果所有.highlighted的父元素（比如示例中的<td>）属于同一级别的兄弟元素，可以利用CSS的:has()选择器定位到第一个和最后一个包含.highlighted的父元素，再选中内部的目标元素：

/* 所有.highlighted默认紫色背景 */
.highlighted {
  background: purple;
}

/* 第一个包含.highlighted的父元素内的目标元素设为红色 */
td:has(.highlighted):first-of-type .highlighted {
  background: red;
}

/* 最后一个包含.highlighted的父元素内的目标元素设为红色 */
td:has(.highlighted):last-of-type .highlighted {
  background: red;
}

注：:has()是CSS Selectors Level 4的特性，目前Chrome、Firefox 121+、Safari等主流浏览器已支持。

方案2：JavaScript通用方案（适配任意结构） #

如果页面结构复杂、或者需要兼容不支持:has()的浏览器，用JS可以精准选中全局范围内的首尾.highlighted元素：

CSS 代码 #

.highlighted {
  background: purple;
}

/* 新增类用于标记全局首尾元素 */
.highlighted.global-first,
.highlighted.global-last {
  background: red;
}

JavaScript 代码 #

// 获取所有.highlighted元素
const highlightedItems = document.querySelectorAll('.highlighted');

// 确保存在目标元素时再操作
if (highlightedItems.length > 0) {
  // 给第一个元素加标记类
  highlightedItems[0].classList.add('global-first');
  // 给最后一个元素加标记类
  highlightedItems[highlightedItems.length - 1].classList.add('global-last');
}

这个方案不受HTML结构限制，无论.highlighted分布在页面的任何位置，都能准确选中全局的首尾元素。

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