您可以將多個 :before 偽元素套用到相同元素嗎？

同一個元素可以存在多個:before偽元素嗎？

問題：

是否可以將多個 :before 偽元素應用於同一個元素？例如：

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

答案：

不可以，CSS2.1規定一個元素在任何給定時間只能有任意種類的偽元素之一。這意味著雖然一個元素可以同時擁有 :before 和 :after 偽元素，但每種類型不能擁有多個。

因此，當多個 :before 規則針對相同元素時，它們會級聯成單一 :before 偽元素。例如，上面的程式碼折疊為：

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

只有具有最高優先順序的最後一個內容聲明才會生效。

解決方法：

如果你想對同一個元素應用多個:before 偽元素，你可以使用組合選擇器來準確指定瀏覽器應該做什麼。例如：

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

這將建立兩個具有不同內容和樣式的 :before 偽元素。

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