Ist es möglich, die Sichtbarkeit von Elementen in CSS zu erkennen?

Question

Ich habe die API durchsucht und nach Pseudo-Selektoren wie :visible oder :hidden gesucht, war aber enttäuscht, dass kein solcher Selektor existierte . Da jQuery diese Selektoren schon seit einiger Zeit unterstützt, hoffe ich, dass sie implementiert werden. Meine Idee ist, dass ich ein bestimmtes Element nur anzeigen möchte, wenn das Element daneben ausgeblendet ist, aber ich möchte dafür kein JavaScript verwenden. Gibt es Optionen?

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实现。