爲什麼在Chrome中這個頁面是紫色的，而在Firefox中是藍色的？

我這接近一個真正的SSCCE，因爲我可以同時仍復制問題：爲什麼在Chrome中這個頁面是紫色的，而在Firefox中是藍色的？

<!DOCTYPE html> 
<html class="colored-bg"> 
<head> 
    <title>Firefox CSS Priority Test</title> 
    <link rel="stylesheet" id="_switchSheetBackup" href="//Shared.BHStudios.org/_css/visual_Clean_Blue.css"/> 
    <link rel="stylesheet" id="_switchSheet"  href="//Shared.BHStudios.org/_css/visual_Clean_Purple.php"/> 
</head> 

<body> 
    This page should have a purple background, not a blue one. 
    <br/> 
    <a href="#" class="inverse button">This should have purple text.</a> 
</body> 
</html>

^{Live Example}

正如你可以看到，第一個樣式表的情況下，第二個樣式表備份不加載或需要一段時間加載（如果實現minimal-JS站點主題，這是我的方式，所以當樣式改變時，用戶看不到明顯的閃爍）。預期的結果是，如果所有樣式表加載正確，則頁面爲紫色。

這適用於Chrome和Edge瀏覽器，但不適用於Firefox。奇怪的是，它只是背景着色;其他類如inverse button（這使得帶有彩色文本的白色按鈕）按預期工作！ Firefox中是否存在一個怪癖或不支持的功能？最重要的是，我該如何解決這個問題？

此外，I tried minimizing the code further但不能複製這種怪異的行爲。

來源

2016-06-21 Ben Leggiero

請陪任何downvotes與評論，告訴我爲什麼我的問題是不清楚的，沒有用的，或效果不佳的研究，所以我沒有再犯同樣的錯誤。 –

visual_Clean_Purple.php的第33行規則破壞了Firefox中的CSS。嘗試刪除：

*::selection,

BoltClock在this answer提供了一個很好的解釋：

火狐似乎根本不明白::選擇（因此迫使供應商前綴:: - MOZ選擇），所以它會根據規範忽略遇到無法識別的選擇器時的整個規則。

對瀏覽器不理解的一個或多個 選擇一個組中的常見的解決方法是分割/重複規則集。

...

事實上，在這種情況下，它是你可以做你不得不忍受與膨脹的這種輕微位的唯一的事情，即。

來源

2016-06-21 03:49:47 billynoah

啊，我明白了！奇怪它仍然需要一個前綴，畢竟這一次！ –

是的 - 我在這裏學到了一些新東西。謝謝 – billynoah

您在visual_Clean_Purple.php中使用Firefox尚不支持的CSS選擇器（），該選擇器會阻止解釋css選擇器。

我刪除的選擇和它的作品：https://plnkr.co/edit/d0eXisEaAqwvmF4cZL5f?p=preview

來源

2016-06-21 03:52:14

爲什麼在Chrome中這個頁面是紫色的，而在Firefox中是藍色的？

回答

相關問題