I. Introduction:
Just add the css how not rendered? Viewed in the browser, found by other css to cover, I believe that we have encountered such a problem. So how to choose the browser is rendering order css label it? In other words, the priority css selectors is how to provide it?
Second, the text:
An example of the first
<div id = "outerId" class = "outerClass"> <div id = "innererId" class = "innerClass"> <p id = "thisId" class = "thisClass" style = "">这是一个CSS选择器的测试</p> <button type = "button" class = "buttonClass">按钮</button> </div> </div>
Q: How many kinds of css selector can have an impact on the <p> tag style it?
If a detailed analysis, there are too many of permutations and combinations, too much trouble. We talk about which of several categories:
Inline style: i.e. style = "font-size: 12px";
id selector: i.e. #thisId {font-size: 12px;}
Selector class: i.e. .thisClass {font-size: 12px;}
Selector elements: i.e., p {font-size: 12px;}
As the four categories can have an impact on the style <p> tag, then who should and who, who who play small?
There are two explanations:
A weight selector representation: 0.0.0.0, according to the calculation rule number to each filling, the position corresponding to equal, the next comparison;
There are respectively 1000, 100, four coefficient values of the right CSS selectors for the weight calculation.
| Category selector | Explanation | Weight indicates | Weights represent |
|---|---|---|---|
| Inline style | Only one inline style = "" | （1.0.0.0） | 1000 |
| id selector | selector used in several id, i.e., the number # | （0.1.0.0） | 100 |
| Class selector | Type, pseudo-classes, and the number of attributes, such as: .outerClass .buttonClass [type = "button"]: {} The selector has hover 2 classes, an attribute, a pseudo-class | （0.0.1.0） | 10 |
| Element selector | Tag number and the pseudo-element element, such as: p: first-child, the selector element has a label and a p pseudo first-child element | （0.0.0.1） | 1 |
The last few notes:
! important indicating force apply the style, for example:
Button {width:! Important by 150px;}, when the above selector meet mandatory to use this style;
If the comparison the same weight, the latter over the former, after rendering winner;
Inline styles> id selector style> class selector style> element selector styles;
Use CSS selectors, should be avoided and the inline styles important;! ID is commonly used class region is separated from the former node used for positioning the JS, which is used for CSS selectors.
Priority, 1000/100/10/1 Comparative embodiment of this weight coefficient values merely facilitate understanding, the real situation is not reversed, and 10 a class id.
! Important compatibility:
http://www.w3chtml.com/css3/rules/!important.html
------- Transfer vganchou