同級組合器可以在 CSS 中選擇 :before 或 :after 偽元素嗎？

同級組合器可以定位 :before 或 :after 偽元素嗎？

在 CSS 中，同級組合器用於將樣式應用於以下元素：共享同一個父對象，但不相互嵌套。但是，這些組合器是否可以用於定位偽元素，例如 :before 和 :after？

挑戰

考慮以下 CSS 和 HTML code:

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="https://www.google.com/logos/classicplus.png">
</a>

意圖

意圖

此以“http”開頭的錨點，但不應將標記添加到包含圖像的錨點。由於無法使用 img 元素直接定位錨標記，因此假設同級組合器可以定位具有影像同級的錨標記的 :after 偽元素。

問題

但是，這個 CSS 並沒有如預期運作。對於包含影像的錨點，偽元素不會隱藏。

解釋

此行為的原因在於偽元素的本質。偽元素不是 DOM 樹的一部分，由瀏覽器產生。因此，兄弟組合器無法直接針對它們。 CSS 規範規定：「產生的內容不會更改文件樹。特別是，它不會反饋到文件語言處理器（例如，用於重新解析） )."

解要達到預期效果，必須使用JavaScript。腳本可以迭代錨標記，並根據圖像內容添加或刪除所需的樣式。

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