Last night in an interview, find some people to CSS styles priority is not particularly clear, together with oneself also have been summarized the knowledge points, before today will use some time to write down what I know, everybody progresses together...
CSS styles priority is a vast amount of knowledge, I think it can be confused and even &other; Floating &throughout; And &other; Box model &throughout; Par. For the purpose of this article, I've thought about for a long time, perhaps can be summed up with that phrase, namely &other; One load two three important four special &throughout; . Detailed below:

a, &other Load &throughout;

code is as follows:


p {color: # f00; }

in the third line declares a style like this:

  code is as follows:  


p {color: # 000; }

so, final p the font color to black.

2, the position of the stylesheet link: the same style may statement in two style sheets, the same HTML page may also call the two stylesheets, this style still can use the economy is in the principle of priority, it's just this time thus object is different. In an HTML page, for example: the head code is as follows:

  code is as follows:  


<Head>
<The link href="http://www.jb51.net//web/firstStyle.css" rel="stylesheet" type="text/CSS" >
<The link href="http://www.jb51.net//web/secondStyle.css" rel="stylesheet" type="text/CSS" >
</head>

this time, if in firstStyle CSS declarations in this style:

  code is as follows:  


p {color: # f00; }

in secondStyle. The statement in the CSS style like this:

  code is as follows:  


p {color: # 000; }

so, final p the font color to black. It depends on the style sheet link back.

3, &other; Important &throughout;
code is as follows:


<Div id="firstDiv" class="firstDiv >"
<Div id="secondDiv" class="secondDiv >"
<PElem pElem p id="" class=" "style=" color: black;" >Happy

</div>
</div>

the style below written into named style.css. CSS stylesheet:

  code is as follows:  


# # # firstDiv secondDiv pElem {color: red; . # #}
firstDiv secondDiv pElem {color: yellow; }
# firstDiv. PElem {color: blue; }
# firstDiv p {color: gray; }

you can see, will find p font color to black; When the delete style label style, font color to red p; Then delete style sheets and the first line is yellow, this is blue, gray.
CSS this feature called &other; Special &throughout; Contrast, is a way of contrast, you can use a, b, c, d four letters on behalf of their position. Denoting a style tags, b refers to the ID selector, c refers to the class selector and pseudo-classes, d refers to the element selector and pseudo element.
their comparative way is: when a same, compared to b; A, b is the same, comparing c; A, b, c, d, are the same? &other; Thus &throughout; A.

according to the above example to illustrate. Because p in style, there is a, so the highest priority, so p the font color to black. When delete a style, a does not exist, then consider the ID selector, the first CSS declarations have 3 ID, than behind, so it is the ultimate style; And so on.

# 0 - #


This concludes the body part