css权重 vs 浏览器渲染 -- css之弊病
昨日,突现一个bug,令人十分恼火。
基本场景
自己实现一多选日历,可多选多天(相连或不相连均可)。“贵司”的需求真心有些小复杂了,“市面”上没有这样的相似的东东啊
Bug场景
鼠标悬浮到day上时,显示暗灰色,然后点击day的背景变为淡蓝色。问题就出如今这了。当鼠标悬浮的时候此时背景色为暗灰色,可是点击后仍然是暗灰色,仅仅有当鼠标移开这个day的时候才会真正改变背景色
也就是说事实上已经发生作用了。可是css并未真正发生作用
纠错历程
起初首先想到的是css权重问题
第一等:代表内联样式。如: style=””。权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类。伪类和属性选择器。如.content,权值为10。
第四等:代表类型选择器和伪元素选择器。如div p,权值为1。
这个问题也与ITFriend的创始人曾诚于昨晚讨论。曾诚也认为应该是css权重的问题。可是我于今早再试这个问题的时候。将.active的权重提高到非常高。可是依旧不行
昨天有将datepicker.css中有一个.datepicker的选择器中的display属性改动。不管我将其改动还是删除。都会使得这个bug得以解决,可是前提是必须在线上浏览器中改动。这可能导致了浏览器又一次渲染。同一时候也说明了,权重的问题不是特别成立,由于在这个时候,我并没有改动这个地方的css权重
情急之下,仅仅能简单粗暴(由于昨天以为误攻克了,跟Leader说已经解决这个bug),然后仅仅能是通过js动态改变其background,这个地方读者有可能依旧想到是css权重的问题,毕竟行间样式的css权重最高吗,可是为什么改动class中的这个问题却不行呢。这的确是个问题
写在最后
bug尽管解决。可是想想这样的解决方案毕竟不是特别优雅,并且强迫控也会认为这样的写法对效率会有影响,毕竟css渲染要比js快(哈哈,如今pc都什么情况了,我们是不是能够忽略不计了,亲)。
究其根本,还是浏览器渲染问题的详细情况我们并非特别清楚。并且不同浏览器关于css渲染的问题也都不是特别一样。
关于本文
关于这篇博客。有可能读者会看到,我晕。博主也没有正面的解决问题嘛,干嘛还要写这篇文章
是这样。我们解决一个问题并非仅仅有一种方式。毕竟条条大路通罗马。
还有一方面。可能非常多时候,大多数前端project师都非常easy忽略css权重的问题,那么,这篇文章也希望将css权重的问题提到一个能让读者比較重视的位置。
本文结束。欢迎吐槽
最新文章
- input标签中button在iPhone中圆角的问题
- python利用dict模拟switch
- RabbitMQ框架学写笔记-20161130
- C# Tostring 格式化输出字符串全解
- lnmp memcache出问题
- GitHub在Visual Studio 2015中获得TFS/VSO同等地位
- Python核心编程读笔 9: 异常
- (IOS)截图Demo
- easyui datagrid deleteRow(删除行)的BUG!
- 201521123104 《Java程序设计》第6周学习总结
- Day3--Python--字符串,for循环,迭代
- Overloaded Fuction 调用——到底使用的是谁的函数
- C# 整理DotNetBar中SuperGridControl的一些基础属性
- 并发编程之 ConcurrentLinkedQueue 源码剖析
- The Smallest Difference
- Redis主从同步分析(转)
- sTM32 使用TIMx_CH1作为 Tx1F_ED 计数器时钟
- 阿里面试的一点感受 阿里ali片式经历和面试题
- ubuntu mysql主从库的搭建
- java读取配置文件的方法
热门文章
- 【ASP.NET MVC系列】浅谈Google Chrome浏览器(操作篇)(下)
- SpringBoot入门之集成JSP
- [转]Git &; Gitlab 使用指南
- (转)Linux企业运维人员最常用150个命令汇总
- linux下如何批量杀JAVA进程或某个进程方法
- 2.C++中的bool类型,三目运算符,引用
- 【18】观察者模式(Observer Pattern)
- Linux常用基本命令:三剑客命令之-sed
- LintCode Binary Search
- canvas-star3