同級組合器可以針對像 :before 或 :after 這樣的偽元素嗎？

同級組合器和偽元素

在這個CSS 困境中，我們遇到了是否可以定位偽元素的問題，特別是:before 或:after，使用兄弟組合器。

考慮以下CSS：

a[href^="http"]:after {
  content:"";
  width:10px;
  height:10px;
  display:inline-block;
  background-color:red;
}

a[href^="http"] img ~ :after {
  display:none;
}

以及後續HTML：

<a href="http://google.com">Test</a>
<a href="http://google.com">
  <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="同級組合器可以針對像 :before 或 :after 這樣的偽元素嗎？" >
</a>

其目的是將偽元素應用於所有匹配的錨標記，但包含圖像的錨標記除外。然而，CSS 未能如預期運作。

答案在於偽元素的本質。根據 CSS 規範，偽元素產生的內容不會影響 DOM 結構。這意味著依賴 DOM 樹中存在的元素的同級組合器無法定位偽元素。

換句話說，CSS 試圖隱藏共享錨標記上的 :after 偽元素一位有圖像的家長。然而，由於 :after 偽元素沒有渲染到 DOM 中，同級組合器不可能找到它。

因此，JavaScript 通常是更適合根據元素定位元素的解決方案。與 DOM 中其他元素的關係。

以上是同級組合器可以針對像 :before 或 :after 這樣的偽元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！