一.外部CSS，內部CSS，內聯CSS優先級
1.內聯CSS（聲明在元素上“style=“*****””） 》 內部CSS（聲明在head標簽內的） 》 外部CSS（引用css文件）
二.ID，Class，Style（內聯）優先級
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：我寫博客的目的只為學習記錄和幫助和我一樣的小菜鳥。我也水，不對的地方，請多指教。