為什麼 CSS 規則會因為選擇器無效而被丟棄？

無效的CSS 選擇器導致規則被刪除：基本原理

背景

在CSS 選擇器等級3 中，解析錯誤會導致丟棄包含以下內容的規則：無效的選擇器。瀏覽器多年來一直實施這種行為，確保可預測的錯誤處理。

基本原理

丟棄整個規則的基本原理是多方面的：

1. 選擇器解析中的歧義：逗號和其他標點符號可以建立解析含糊之處。天真的解析器可能很難確定選擇器組或聲明塊的範圍而不引發錯誤。
2. 錯誤處理的一致性：統一處理所有解析錯誤可以簡化實作並避免潛在的不一致行為跨瀏覽器。
3. 向前相容性： 迎接未來新的選擇器語法的潛力可以防止引入更複雜和不明確的錯誤處理規則。

範例

為了說明這個問題，這裡有一個範例規則：

#menu li.last, #menu li:last-child {
  ...
}

在像IE8缺乏:last-child 支援 這樣的瀏覽器中，儘管第一個選擇器有效，但由於無效選擇器，整個規則都會被丟棄選擇器。

替代方法

考慮刪除無法辨識的選擇器而不丟棄規則。然而，它帶來了潛在的風險：

1. 意外的選擇器行為：解析的選擇器可能會被錯誤地應用，導致意外的佈局或樣式。
2. 實現複雜性： 確定在何處將無效選擇器與有效選擇器分開可能具有挑戰性並且受制於錯誤。

異常

某些版面引擎可能會表現出不同的行為。 WebKit 忽略帶有前綴的選擇器，而其他選擇器則忽略整個規則。這些偏差強調如果修改錯誤處理規則，可能會出現跨瀏覽器不一致的情況。

以上是為什麼 CSS 規則會因為選擇器無效而被丟棄？的詳細內容。更多資訊請關注PHP中文網其他相關文章！