如何用CSS选择容器中首个和最后一个可见的div子元素？

选中首个可见元素 #

使用CSS的:nth-child()筛选语法，先筛选出所有不带.hidden的div子元素，再选中其中第一个：

/* 替换.container为你的容器选择器 */
.container > div:not(.hidden):nth-child(1 of div:not(.hidden)) {
  /* 自定义样式示例 */
  background-color: #f0f9ff;
}

选中最后一个可见元素 #

用:nth-last-child()筛选出符合条件的最后一个子元素：

.container > div:not(.hidden):nth-last-child(1 of div:not(.hidden)) {
  /* 自定义样式示例 */
  background-color: #fff2f0;
}

为什么你的原选择器无效？ #

你之前用的div:not(.hidden):last-child不生效的核心原因是：:last-child只会匹配容器的最后一个子元素，不管它是否带有.hidden类。如果容器最后一个子元素刚好是隐藏状态，这个选择器就匹配不到任何元素。而上面的筛选语法会先把所有可见的div子元素单独提取出来，再从中选择首尾元素，完全贴合需求。

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