如何用CSS选中首个/末尾media类元素并添加指定样式

嘿，这个需求完全可以用纯CSS搞定，不用碰任何HTML代码，我给你整理了精准的解决方案：

1. 为首个.media元素添加上边框 #

因为section里可能夹杂着无关div，直接用:first-child肯定会失效，所以我们需要精准定位第一个出现的.media类元素，推荐用这个兼容性不错的选择器：

section .media:not(.media ~ .media) {
  border-top: 1px solid #333; /* 可替换成你需要的边框颜色/宽度 */
}

逻辑说明：

• .media ~ .media 会选中所有前面已经出现过.media元素的后续.media节点
• :not() 伪类把这些后续元素排除掉，剩下的自然就是第一个出现的.media

如果你的项目只需要支持现代浏览器（Chrome 105+/Firefox 121+/Safari 15.4+），也可以用更简洁的:has()写法：

section :not(.media):has(+ .media) + .media {
  border-top: 1px solid #333;
}

这个写法的逻辑是：找到前面是「非.media元素」且后面紧跟着.media的节点，再选中它的下一个.media——也就是section里的第一个media元素。

2. 选中末尾的.media元素（如果后续需要） #

如果之后要给最后一个.media加样式，现代浏览器可以用:has()实现精准定位：

section .media:not(:has(~ .media)) {
  /* 这里写最后一个.media的样式，比如下边框 */
  border-bottom: 1px solid #333;
}

如果要兼容旧浏览器，且能保证section的最后一个元素是.media的话，可以简化成：

section .media:last-of-type {
  border-bottom: 1px solid #333;
}

（注：如果section最后是无关div，这个简化写法会失效，还是推荐:has()方案）

示例验证 #

假设你的HTML结构是这样的：

<section>
  <div>无关内容1</div>
  <div class="media">媒体内容1</div>
  <div>无关内容2</div>
  <div class="media">媒体内容2</div>
  <div>无关内容3</div>
</section>

用第一个CSS方案后，只有第一个.media会添加上边框，完全符合你的需求，不管里面的div数量怎么变，逻辑都能生效。

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