标签：doctype 就会 type 内联 center height 重复 tip dfa
1.内联CSS（声明在元素上“style=“*****””） 》 内部CSS（声明在head标签内的） 》 外部CSS（引用css文件）
1.3者的样式设置不冲突----------结论：3者的样式设置不重复，就会依照所有的样式去渲染元素，3者都采用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> .testclass{ /*用来测试class的字体大小设置*/ font-size:50px; } #testid{ border:1px solid black;/*用来测试id的边框样式设置*/ } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!--用来测试style（内联）的字体颜色设置--> <p id="testid" class="testclass" style="color:blue;">测试用例元素</p> </div> </body> </html>
2.局部2者重复碰撞设置---------------结论： style（内联样式） 》 ID 》Class
①class 和 id 冲突设置（重复设置的边框样式是按照id来渲染的）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> /*用来测试class的边框样式（绿色）*/ .testclass{ border:1px solid green; } /*用来测试id的边框样式（粉色）*/ #testid{ border:1px solid pink; } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <p id="testid" class="testclass" style="color:blue;">测试用例元素</p> </div> </body> </html>
②class 和 style 冲突设置（重复的部分是按照style（内联）样式来渲染的）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> /*用来测试class的字体样式（绿色）*/ .testclass{ color:green; } /*用来测试id的边框样式（粉色）*/ #testid{ border:1px solid pink; } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- 用来测试style的字体颜色样式（黑色） --> <p id="testid" class="testclass" style="color:black;">测试用例元素</p> </div> </body> </html>
③id和style冲突设置（重复的部分是仍然是按style（内联样式）来渲染的）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> /*用来测试class的字体样式（绿色）*/ .testclass{ color:green; } /*用来测试id的字体样式（粉色）*/ #testid{ color:pink; } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- 用来测试style的字体颜色样式（黑色） --> <p id="testid" class="testclass" style="color:black;">测试用例元素</p> </div> </body> </html>
3.3者冲突测试-------------------结论：冲突部分按照style（内联样式）》ID》Class 来渲染，不冲突部分全部采用并渲染。
①3者全部冲突（按style》ID》Class 来渲染）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> /*用来测试class的字体样式（绿色）*/ .testclass{ color:green; } /*用来测试id的字体样式（粉色）*/ #testid{ color:pink; } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- 用来测试style的字体颜色样式（黑色） --> <p id="testid" class="testclass" style="color:blue;">测试用例元素</p> </div> </body> </html>
③3者中部分冲突（重复部分按style》ID》Class来渲染，不冲突部分全部采用并渲染）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> /*用来测试class的字体样式（绿色）字体大小（60）*/ .testclass{ color:green; font-size:60px; } /*用来测试id的字体样式（粉色）边框样式*/ #testid{ color:pink; border:2px solid black; } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- 用来测试style的字体颜色样式（黑色） --> <p id="testid" class="testclass" style="color:blue;">测试用例元素</p> </div> </body> </html>
4.一点细节：如果类似于border，里面有多部分组成（比如：2px solid black），这里面只有部分重复会怎么样（冲突部分按照style（内联样式）》ID》Class 来渲染，不冲突部分全部采用并渲染）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <STYLE TYPE="text/css"> /*用来测试class的边框样式（2px solid red）*/ .testclass{ border:2px solid red; } /*用来测试id的边框样式（2px solid blue）*/ #testid{ border:2px solid blue; } </STYLE> </head> <body> <div id=‘grandfather‘ style="width:500px;height:500px;border:solid 2px red;position:absolute;top:5%;left:50%;margin-left:-250px;text-align: center;"> <!-- 用来测试style的边框样式（2px solid green） --> <p id="testid" class="testclass" style="border:2px solid green; ">测试用例元素</p> </div> </body> </html>
时间宝贵: ①内联样式（style）》内部样式（在head内声明的样式）》外部样式（外部css文件）
②style，ID，Class 3者的样式冲突部分按照（style（内联样式）》ID》Class）渲染元素，不冲突部分全部采用并且渲染。
tip：我写博客的目的只为学习记录和帮助和我一样的小菜鸟。我也水，不对的地方，请多指教。
qq：2656062151 email：2656062151@qq.com
CSS优先级----ID,Class,style（内联）常见情况一览
标签：doctype 就会 type 内联 center height 重复 tip dfa
原文地址：http://www.cnblogs.com/horsen/p/6636024.html
