CSS结构限制下，如何为.highlight-child首尾元素设置样式？

问题原因 #

你之前的CSS代码无效，核心原因是:first-child和:last-child选择器的作用逻辑是匹配元素在其父元素中的位置。每个.highlight-child都是它直接父div的唯一子元素，所以所有.highlight-child都会命中.highlight-child:first-child规则，导致样式无法区分首末元素。

解决方案 #

方法一：基于父容器子元素位置定位（兼容性好） #

通过定位最外层容器的子div位置，精准选中目标元素：

.highlight-child{
  height:30px;
  width:30px;
  margin:10px;
  background-color:yellow;
}

/* 选中第一个.highlight-child：最外层div的第2个子div内部的元素 */
div > div:nth-child(2) .highlight-child {
    background-color: pink;
}

/* 选中最后一个.highlight-child：最外层div的最后一个子div内部的元素 */
div > div:last-child .highlight-child {
    background-color: red;
}

方法二：使用:has()选择器（语义化更强） #

如果你的目标浏览器支持CSS :has()选择器（主流现代浏览器已支持），可以直接选择包含.highlight-child的父div的首末项：

.highlight-child{
  height:30px;
  width:30px;
  margin:10px;
  background-color:yellow;
}

/* 第一个包含.highlight-child的父div内部的目标元素 */
div:has(.highlight-child):first-of-type .highlight-child {
    background-color: pink;
}

/* 最后一个包含.highlight-child的父div内部的目标元素 */
div:has(.highlight-child):last-of-type .highlight-child {
    background-color: red;
}

优化建议 #

如果能给最外层的容器div添加类名（比如container），选择器会更精准，避免影响页面其他无关结构：

<div class="container">
  <!-- 内部原有结构不变 -->
</div>

对应CSS修改为：

.container > div:nth-child(2) .highlight-child {
    background-color: pink;
}

.container > div:last-child .highlight-child {
    background-color: red;
}

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