如何通过CSS选择器选取无隐藏父元素的首个可见目标元素？

方法一：使用CSS :has 伪类（现代浏览器支持） #

如果你的目标浏览器支持:has伪类（Chrome 101+、Firefox 121+等版本），可以直接用复合选择器筛选出父元素未设置display:none的.find-me元素，再取第一个匹配项：

const found = document.querySelector(':not(:has([style*="display:none"])) .find-me');
console.log(found.innerText);

要是父元素的隐藏是通过类名（比如.hidden）实现的，把选择器改成:not(.hidden) .find-me即可。

方法二：JS遍历判断（全浏览器兼容） #

如果需要兼容不支持:has的旧浏览器，最稳妥的方式是先获取所有.find-me元素，逐个检查父元素的计算样式是否可见，找到第一个符合条件的：

const found = Array.from(document.querySelectorAll('.find-me'))
  .find(el => window.getComputedStyle(el.parentElement).display !== 'none');

console.log(found?.innerText);

这种方式用getComputedStyle获取父元素的实际渲染样式，不管隐藏是内联样式、类还是外部CSS控制的，都能准确判断。

补充提示 #

• :has伪类目前仅能在JS的querySelector/querySelectorAll中使用，无法直接写在CSS样式表里。
• 如果父元素是通过visibility:hidden或opacity:0隐藏的，需要对应调整getComputedStyle的检查条件。

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