css權重 vs 瀏覽器渲染 -- css之弊病

標籤：css   瀏覽器渲染   

昨日，突現一個bug，令人十分惱火。

基本情境

自己實現一多選日曆，可多選多天（相連或不相連均可），“貴司”的需求真心有些小複雜了，“市面”上沒有這種類似的東東啊

Bug情境

滑鼠懸浮到day上時，顯示暗灰色，然後點擊day的背景變為淡藍色，問題就出現在這了，當滑鼠懸浮的時候此時背景色為暗灰色，但是點擊後仍然是暗灰色，只有當滑鼠移開這個day的時候才會真正改變背景色

也就是說其實已經發生作用了，但是css並未真正發生作用

錯誤修正曆程

1. 起初首先想到的是css權重問題

   第一等：代表內聯樣式，如: style=””，權值為1000。

   第二等：代表ID選取器，如：#content，權值為100。

   第三等：代表類，偽類和屬性選取器，如.content，權值為10。

   第四等：代表類型選取器和虛擬元素選取器，如div p，權值為1。

   
   

   這個問題也與ITFriend的創始人曾誠於昨晚討論，曾誠也覺得應該是css權重的問題，但是我於今早再試這個問題的時候，將.active的權重提高到非常高，但是依然不行

   
   

2. 昨天有將datepicker.css中有一個.datepicker的選取器中的display屬性修改，無論我將其修改還是刪除，都會使得這個bug得以解決，但是前提是必須線上上瀏覽器中修改，這可能導致了瀏覽器重新渲染，同時也說明了，權重的問題不是特別成立，因為在這個時候，我並沒有修改這個地方的css權重

3. 情急之下，只能簡單粗暴（因為昨天以為誤解決了，跟Leader說已經解決這個bug），然後只能是通過js動態改變其background，這個地方讀者有可能依然想到是css權重的問題，畢竟行間樣式的css權重最高嗎，但是為什麼修改class中的這個問題卻不行呢。這的確是個問題

寫在最後

bug雖然解決，但是想想這種解決方式畢竟不是特別優雅，而且強迫控也會覺得這種寫法對效率會有影響，畢竟css渲染要比js快（哈哈，現在pc都什麼情況了，我們是不是可以忽略不計了，親）。

究其根本，還是瀏覽器渲染問題的具體情況我們並不是特別清楚，而且不同瀏覽器關於css渲染的問題也都不是特別一樣。

關於本文

關於這篇部落格，有可能讀者會看到，我暈，博主也沒有正面的解決這個問題嘛，幹嘛還要寫這篇文章

是這樣，我們解決一個問題並非只有一種方式，畢竟條條大路通羅馬。

另一方面，可能很多時候，大多數前端工程師都很容易忽略css權重的問題，那麼，這篇文章也希望將css權重的問題提到一個能讓讀者比較重視的位置。

本文結束，歡迎吐槽