我可以仅使用 CSS 检测元素可见性吗？

Question

我检查了一些伪选择器的 API，例如 :visible 或 :hidden ，但很失望地发现不存在这样的选择器。由于 jQuery 已经支持这些选择器有一段时间了，我希望它们能够被实现。这个想法是，我只想在某个元素旁边的元素被隐藏时才显示它，但我不想使用 JavaScript 来这样做。有什么选择吗？

原文由 GMchris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不，这是不可能的， 也不可能，至少在样式表中是这样。

否则，您可以创建一个无限循环：

 element:visible {
  display: none;
}

元素一开始是可见的，然后选择器会选择它并隐藏它，然后选择器不会应用，它会再次变得可见，等等。

可以仅在 querySelector 等 JS API 中允许该伪类。但据我所知，没有这样的东西，而且它不会是纯 CSS 的。

原文由 Oriol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这取决于您所说的“旁边”是什么意思。您可以使用 属性选择器 通过可见性选择元素。或从 这里：

CSS 属性选择器根据给定属性的存在或值匹配元素。

要通过可见性访问元素，您可以使用例如匹配属性选择器星的子字符串 [att*=val] 。假设使用 visibility: hidden; 隐藏了 div 的样式：

 div[style*="hidden"] {

}

---

现在的问题是如何访问“旁边”的元素。如果您尝试定位的元素直接位于隐藏元素之后（在同一父元素中），请使用 + 选择器：

 div[style*="hidden"] + span {

}

如果是以前，那么您很不走运，但可以在这个问题的答案中寻找一些解决方法： 是否有“前一个兄弟姐妹”CSS 选择器？

原文由 user8954506 发布，翻译遵循 CC BY-SA 3.0 许可协议