zoukankan      html  css  js  c++  java
  • 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权重的问题提到一个能让读者比較重视的位置。


    本文结束。欢迎吐槽

  • 相关阅读:
    注册验证
    翻页加输入框
    php面向对象
    封装数据库
    浅谈BFC和haslayout
    总结JS面向对象
    总结(JS)
    转载6
    总结(5.30)
    总结(5.29)
  • 原文地址:https://www.cnblogs.com/mqxnongmin/p/10745458.html
Copyright © 2011-2022 走看看