為什麼我們不能將特定於供應商的佔位符選擇器組合到單一 CSS 規則中？

揭開組合特定於供應商的選擇器的謎團

在CSS 領域內，遇到了跨多個瀏覽器設定佔位符文字樣式的難題。為了實現最佳的跨瀏覽器支持，採用了供應商特定的偽類和偽元素的組合。然而，存在一個令人困惑的困境：為什麼不能像其他 CSS 場景中的慣例那樣將這些規則合併到一個規則集中？

深入研究 CSS2.1 規格可以揭開答案。它要求將選擇器定義為第一個左大括號 ({) 之前的所有內容。當使用者代理程式遇到無法破解的選擇器時，它必須忽略選擇器和隨後的聲明區塊。

這意味著具有某些前綴的瀏覽器可能無法理解具有其他供應商特定前綴的選擇器，導致排除選擇器中提及這些無法識別的前綴的規則。因此，嘗試將這些規則組合成一個以逗號分隔的規則集，如下所示：

input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
  font-style: italic;
  text-align: right;
}

將被證明是徒勞的。使用者代理程式只會將樣式套用於識別的選擇器，從而導致跨瀏覽器的樣式不一致。

這個複雜的規則是有目的的。它確保瀏覽器遵守公認的 CSS 語法，並且只實現它們完全理解的規則。透過強制執行此操作，可以避免由於供應商特定偏差而導致的任何潛在不一致或渲染錯誤。

以上是為什麼我們不能將特定於供應商的佔位符選擇器組合到單一 CSS 規則中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！