css权重 vs 浏览器渲染 -- 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渲染的问题也都不是特别一样。

关于本文

关于这篇博客。有可能读者会看到，我晕。博主也没有正面的解决问题嘛，干嘛还要写这篇文章

是这样。我们解决一个问题并非仅仅有一种方式。毕竟条条大路通罗马。

还有一方面。可能非常多时候，大多数前端project师都非常easy忽略css权重的问题，那么，这篇文章也希望将css权重的问题提到一个能让读者比較重视的位置。

本文结束。欢迎吐槽