CSS weights vs Browser rendering-the drawbacks of CSS

Yesterday, the emergence of a bug, it is very annoying.

Basic Scenario

The realization of a multi-choice calendar, you can choose more than a few days (connected or not connected can), "your company" needs really a little complex, "on the market" there is no such thing AH

Bug Scenario

When the mouse hovers over the day, the dark gray is displayed, and then the background is changed to light blue, the problem is here, when the mouse hover when the background color is dark gray, but after the click is still dark gray, only when the mouse to remove the day will really change the background color

That means it's actually going to work, but CSS doesn't really work.

Error correction process

2. The first thing to think about is the CSS weight problem

   P style= "line-height:1.5; margin-top:0px; margin-bottom:10px "> First, etc.: represents inline style, such as: style=" ", weighted value of 1000.

   Second, etc.: Represents the ID selector, such as: #content, with a weighted value of 100.

   Third class: represents classes, pseudo-classes, and attribute selectors, such as. Content, with a weight of 10.

   Fourth: Represents a type selector and a pseudo-element selector, such as Div p, with a weight of 1.

   
   

   This problem also with Itfriend founder Zeng Cheng in last night's discussion, Zeng Cheng also think it should be the problem of CSS weights, but I again this morning to try this question, will. The weight of the. Active is raised to very high, but still not

   
   

4. Yesterday there will be a datepicker.css in a. DatePicker in the selector of the display property modification, whether I modify it or delete, will make this bug resolved, but only if the browser must be modified online, which may cause the browser to re-render, but also that the weight of the problem is not is particularly set up because at this time I didn't modify the CSS weights for this place

6. Nasty under, can only simple rough (because yesterday thought to solve, with leader said has solved this bug), and then only through JS dynamic change its background, this place reader may still think of is CSS weight problem, after all, the inline style CSS weights the highest? But why not modify the problem in class? This is a problem.

Written in the last

Although the bug solved, but think of this solution is not particularly elegant, and forced control will also feel that this writing to the efficiency will have an impact, after all, CSS rendering is faster than JS (haha, now the PC is what the situation, we can not ignore, pro).

At the root of this, or the browser rendering problem of the specific situation we are not particularly clear, and different browsers about CSS rendering problems are not particularly the same.

About this article

About this blog, it is possible that readers will see, I faint, Bo Master also did not solve the problem positively, why do you want to write this article

So, there is not only one way to solve a problem, but all roads lead to Rome.

On the other hand, there may be times when most front-end engineers can easily ignore the problem of CSS weights, so this article also wants to refer to the CSS weight issue to a place where the reader can pay more attention.

The end of this article, Welcome to the Groove