多個 :before 偽元素可以應用在同一個元素上嗎？

同一元素的多個 :before 偽元素

多個 :before 偽元素可以應用在同一個 HTML 元素上嗎？

考慮以下事項場景：

<p>Is it possible to have multiple :before pseudos for the same element?</p>

<pre class="brush:php;toolbar:false">.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

在 CSS2.1 中，一個元素在任何給定時間只能擁有每種類型的一個偽元素。因此，當多個 :before 規則針對相同元素時，它們會級聯形成單一 :before 偽元素。在提供的範例中，結果如下：

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

最近聲明的內容聲明優先，而其他聲​​明被丟棄。此行為與常規 CSS 屬性類似。

要將具有不同內容的多個偽元素套用於元素，請使用組合選擇器建立其他 CSS 規則。例如，您可以使用 .circle.now:before 或 .now.circle:before 來定位元素並為每個偽元素指定所需的內容。

舊版 CSS 規範提出了一種用於插入多個 的語法： :before 和 ::after 偽元素，具有 CSS2.1 相容級聯。然而，此功能尚未實現，並且不太可能包含在未來的規範中。

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