Home > Developer > Web Develop
For the front end, to understand the priority of CSS style, to develop or deal with the bug has a multiplier effect, today in the project, suddenly encountered a priority small problem, just at the beginning do not know the cause, later found that the problem is caused by priority. Describe the problem first, when the mouse hovers over the parent container, the child container appears, and the move disappears. See this problem, some people may want to spray, this and priority has a yarn relationship, it does not seem to matter, in fact, there is a certain relationship. If you are writing a sub-container style with inline notation, does this hover still work? Look at the following code ...
Sample code
<! DOCTYPE html><Html><Head><Metacharset="UTF-8" ><title> I am a test demo</Title><Style> . divtest{Width 200px;Height 100px;Border 3PX solid red;Font-size: 14px;Text-align:CenterMargin 10px0}. divtestH2{DisplayNone. divtest: hoverH2{DisplayBlock</Style></Head><Body><Divclass="Divtest" ><H2> is not want me!!!</H2></div> <div class= "divtest" > <h2> is not want me!!! </h2> </ div> <div class= "divtest" > <h2 style= "Display:none" > Think I also useless!!! </h2> </ div></BODY> When you test this demo, you will see that the mouse hovers over the third Div without any effect. Why this problem, is not the mouse hover event has not been triggered, although thought this is not possible, but I still tested, I will be the third inline style removal, found that the hover event can be triggered, what is the cause of it?
Analysis Reason
Mouse Hover event can be triggered, in the inline write Display:none but no effect, then what causes? is not the display:none written inline, which disables the hover event? The answer is not that, inline display:none, does not prohibit the mouse hover event, but because the inline style priority is much higher than the other introduction method.
The process is probably like this:
How to make it appear normally without modifying the inline style condition
One of the properties in CSS:!important
Description: Promotes application precedence for a specified style rule.
If the inline style is a long-range missile powerful, then!important is like the destruction of nuclear weapons in the sky. Its priority can be said to be the most weight in CSS, of course, regardless of compatibility.
.divTest:hover h2{display: block !important;}
In browsers that are incompatible with the!important property, the demo above can achieve the desired effect because the!important priority is higher than the inline style precedence.
CSS Precedence rules
P{ColorRedFont-size: 14PX}/* Tag Selector */. Test{color: Red; font-size: 14px}/* class selector */ #warp {color: Red; font-size: 14px}/*id selector */*{color:< Span class= "hljs-value" > red; font-size: 14px}/* Universal selector */ DivH2,P{ColorRedFont-size: 14PX}/* Group Selector */DivA{ColorRedfont-size: 14px}/* descendant selector */div>a {color: Red font-size: 14px}/* sub-selector */h2+p {color: Red font-size: 14px}/* Fellow selector */ p[title]{color: red;font-size: 14px} p[class="test"]{color: red;font-size: 14px}
CSS Precedence (Learn from predecessors ' notes)
The ID selector defaults to the highest priority, with a weight of 100
The class selector, the property selector, and the pseudo class selector have a weight of 10
The label selector has a lower priority and a weight of 1 so when comparing the priority of a style, you simply need to count the number of IDs, class, tag names in the selector and add the corresponding weights. Depending on the results, priority levels can be drawn.
If the style value contains!important, the value has the highest precedence
h2{Color: Blue;}The weight value is 1#content {Color:#666;} //Its weighted value is 100p . test{color:#ccc;} //Its weighted value is 1+10=11 #main div . test{color: red;} //Its weight is 100+1+10=111div #main . Left #nav {color:#000}//Its weight is 1+100+ 100=211 Summarize
CSS priority is the front-end must master the basic knowledge, in the development or modification of the page bug, the CSS style of different scenarios are likely due to the CSS priority, so in the face of page style problems, the CSS priority is considered, perhaps can get unexpected results.
Bug with CSS Precedence
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
