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渲染的问题也都不是特别一样。

关于本文

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

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

另一方面，可能很多时候，大多数前端工程师都很容易忽略css权重的问题，那么，这篇文章也希望将css权重的问题提到一个能让读者比较重视的位置。

本文结束，欢迎吐槽