CSS 伪类，如 :empty ，但也忽略隐藏的孩子

【问题标题】：CSS pseudo-class like :empty , but also ignores hidden childrenCSS 伪类，如 :empty ，但也忽略隐藏的孩子
【发布时间】：2017-10-26 01:30:59
【问题描述】：

:empty pseudo-class 代表任何没有子元素的元素。是否有类似的伪类来表示任何没有可见子元素的元素（忽略 display 设置为 none 的子元素）？

如果没有这样做的伪类，有没有办法使用 CSS 实现这种过滤？

【问题讨论】：

【解决方案1】：

CSS 选择是一棵单向树。一旦你对孩子下手，你就不能再对父母采取行动了。

您需要检查所有孩子的display: none; 属性，以了解它们是否全部隐藏。您可以像这样选择所有隐藏的孩子：<parent tag> *[display=none]。但是，没有办法知道是否所有子项都已隐藏，并且一旦识别出隐藏的子项，就无法重新选择父项。

为了实现这一点，您需要使用 JavaScript。看到这个：Check if all children elements are hidden

【讨论】：