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权重的问题提到一个能让读者比较重视的位置。


本文结束,欢迎吐槽

css权重 vs 浏览器渲染 -- css之弊病,布布扣,bubuko.com

css权重 vs 浏览器渲染 -- css之弊病

上一篇:AngularJS入门和快速开始


下一篇:for循环知识及例题