CSS是否能够实现元素可见性的检测？

Question

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

Answer 1

这取决于你对“next to it”是什么意思。 你可以使用属性选择器通过可见性选择元素。或者从这里选择：

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

div[style*="hidden"] {

}

---

现在的问题是如何访问“next to it”的元素。 如果你尝试定位的元素直接在隐藏元素之后（在同一父级内），使用+选择器：

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

}

如果它在之前，你就没有办法了，但可以在这个问题的答案中寻找一些解决方法：是否有“previous sibling” CSS选择器？

Answer 2

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

否则，你会创建一个无限循环：

element:visible {
  display: none;
}

元素一开始是可见的，然后选择器会选择它并隐藏它，然后选择器不适用，它又变得可见，依此类推。

在JS API中，允许使用伪类选择器，比如querySelector。但据我所知，目前还没有这样的东西，而且它不可能只使用CSS实现。