同級組合器可以針對 CSS 中的偽元素嗎？

同級組合器與偽元素：定位限制

可以使用同級組合器來定位偽元素嗎？最近的 CSS 問題引發了這個問題。

在這種情況下，帶有前面圖像的錨標記不應顯示偽元素。由於影像的存在，直接定位錨點是不可行的。因此，嘗試了在偽元素上使用同級組合器的替代方法，如下所示：

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

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

但是，當錨標記包含圖像時，CSS 無法隱藏偽元素。為什麼會這樣呢？

限制在於偽元素的本質。產生的內容（包括偽元素）不包含在 DOM 中，並且不會影響原始文件。 CSS 規格中明確指出了這一點：

「產生的內容不會更改文件樹。特別是，它不會反饋到文件語言處理器（例如，用於重新解析）。」

因此，兄弟組合器無法定位:before 或:after 偽元素，因為它們不是DOM 的一部分

類似場景，可以考慮使用JavaScript 動態操作DOM，達到想要的樣式效果。

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