一個元素上可以有多個 :before 偽元素嗎？

多 :before 偽元素

一個元素可以擁有多個 :before 偽元素嗎？使用 jQuery 將樣式套用到相同元素時會出現此問題，其中似乎只有最新的樣式才會生效。

CSS2.1 限制

在 CSS2.1 中，一個元素在任何給定時間只能有一個特定類型的偽元素。因此，一個元素可以同時具有 :before 和 :after 偽元素，但每個偽元素不能超過一個。

級聯行為

多個 :before 規則相同的元素被級聯並應用於單一 :before 偽元素。優先順序最高的規則（通常是最後一個）優先。在提供的範例中：

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

僅應用最後一條規則「Now」中的內容聲明。其餘聲明將被丟棄，與普通元素屬性類似。

組合選擇器

如果多個選擇器匹配同一個元素並且您希望應用它們的所有樣式，請產生額外的具有組合選擇器的CSS 規則。對於給定的範例，這將是 .circle.now:before 或 .now.circle:before。

舊版CSS3 內容規範

已棄用的css3 內容規範建議使用一種符號來插入多個與CSS2.1 級聯相容的::before 和::after 偽元素。不過，此功能已過時，尚未被任何瀏覽器實作。

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