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實作。