多個 :before 偽元素可以套用於單一 HTML 元素嗎？

多個:before 偽元素：限制概述

問題：

可以多個:before 偽元素應用於單一HTML元素？

答案：

不幸的是，CSS2.1 中同一個元素不可能有多個 :before 偽元素。一個元素一次只能有任意一種偽元素之一，包括 :before 和 :after。

說明：

當多個 :before 規則應用時對於相同元素，它們級聯並合併為單一 :before 偽元素。只有具有最高優先權的最頂層規則才會應用其聲明。這與常規 CSS 屬性的級聯工作方式一致。

因此，在您的範例中：

只套用第二條規則，輸出將為：

替代方法：

克服這個問題限制，您可以：

• 將多個規則組合到一個選擇器中，例如.circle.now:before，這會將兩個規則應用於元素。
• 使用 CSS像 Sass 或 Less 這樣的預處理器，它允許您巢狀選擇器並為相同元素建立多個 :before 偽元素。

以上是多個 :before 偽元素可以套用於單一 HTML 元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！