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

Question

我检查了API的一些伪选择器,如:visible或:hidden,但很遗憾发现没有这样的选择器存在.既然jQuery已经支持这些选择器一段时间了,我希望它们能够被实现.我的想法是,我只想在隐藏它旁边的元素时显示某个元素,但我不想使用JavaScript这样做.任何选择？

Answer 1

不,这是不可能的,至少在样式表中是不可能的.

否则,您可以创建一个无限循环:

element:visible {
  display: none;
}

元素首先是可见的,然后选择器会选择并隐藏它,然后选择器将不会应用,它将再次可见,等等.

有可能只允许在JS API中使用伪类querySelector.但据我所知,没有类似的东西,它不会只是CSS.

Answer 2

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

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

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

div[style*="hidden"] {

}

现在的问题是，如何访问元素“下一个”。如果您尝试定位的元素紧跟在隐藏的元素之后（在同一父对象中），请使用+选择器：

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

}

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