纯css无法可靠选中最后一个非隐藏元素，因结构伪类不感知display:none等渲染状态；:not([style*="display:none"]):last-child易失效；现代css可用:nth-last-child(1 of .target)但兼容性有限；js通过getcomputedstyle筛选并标记最可靠。
纯 CSS 无法可靠选中“最后一个非隐藏元素”——因为 :last-child、:nth-last-of-type(1) 等都是结构伪类，只看 DOM 位置，完全不感知 display: none、visibility: hidden 或 opacity: 0 等渲染状态。
为什么 :not([style*="display:none"]):last-child 不靠谱
这个写法看似合理，但实际极易失效：
- 它要求目标元素**同时是最后一个子节点**，且内联 style 中不含
display:none；只要末尾有个被隐藏的兄弟元素（哪怕只是个空<div style="display:none"></div>），整个选择器就匹配不上 - 它只检测
style属性字符串，对通过 class、CSS 文件或 JS 设置的display: none完全无感 - 多个空格、换行、
display: flex下的隐藏逻辑、hidden属性等都会让它失灵
现代 CSS 的有限解法：:nth-last-child(1 of .target)
Chrome 105+、Firefox 109+、Safari 16.4+ 支持这个语法，能真正按 class 过滤后取最后一个：
.container > .item:nth-last-child(1 of .item) {
/* 只作用于 .container 的直接子级中，最后一个 .item */
}
但它有硬性前提：
- 必须是**同级兄弟元素**（不能跨层嵌套）
- 目标元素必须带
.item类，且该类不能被动态移除或重命名 - IE 和旧版 Safari 完全不支持，降级方案需另配
真正稳定可靠的落地方式：JS 补位
用几行 JS 主动标记最后一个可见元素，再交由 CSS 控制样式，这是目前最可控的做法：
const items = document.querySelectorAll('.container > .item');
const visibleItems = Array.from(items).filter(el => getComputedStyle(el).display !== 'none');
if (visibleItems.length) {
visibleItems[visibleItems.length - 1].classList.add('last-visible');
}
对应 CSS：
.container > .item.last-visible {
/* 你的样式 */
}
关键点：
- 用
getComputedStyle而不是el.style.display，才能捕获 class 或外部样式表控制的隐藏状态 - 务必加
>限定直接子级，避免嵌套结构里子容器的 .item 被误判 - 如果元素可能动态增删，建议封装成函数并在 DOM 变更后重新执行（如 MutationObserver）
最容易被忽略的是：你以为的“最后一个可见元素”，在 DOM 树里可能根本不是同级兄弟——比如它被包在 <div><div class="item"></div></div> 里。动手前先打开 DevTools，右键父容器 → “Reveal in Elements panel”，确认层级和 visibility 状态，比反复调选择器快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
