寫(xiě)在前面
在用Django寫(xiě)一個(gè)項目時(shí)，由于多個(gè)網(wǎng)頁(yè)一些元素的css樣式是重復的，所以就寫(xiě)了該元素的一般樣式，比如a標簽在很多頁(yè)面都會(huì )出現，我們就把這些頁(yè)面的a標簽共同樣式寫(xiě)到css中。當某個(gè)頁(yè)面中a標簽和一般樣式不一樣的時(shí)候我們就需要重寫(xiě)a標簽的樣式來(lái)覆蓋原來(lái)的一般樣式。這看似簡(jiǎn)單，但是當你的標簽里的內容寫(xiě)復雜了之后，你就容易混淆了。
我一個(gè)做后臺的，之前學(xué)習的時(shí)候找了半天都找不到我想要的，都是些最基本的使用，最后竟還是自己debug解決的，所以寫(xiě)下這篇比較詳細的博客希望對和我一樣有需要的人有所幫助。
CSS選擇器的權重與優(yōu)先規則
我們在使用CSS對網(wǎng)頁(yè)元素定義樣式時(shí)經(jīng)常會(huì )遇到這種情況：要對一般元素應用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們怎么樣來(lái)保證我們所新定義的元素樣式能覆蓋目標元素上原有的樣式呢？
在CSS中，會(huì )根據選擇器的特殊性來(lái)決定所定義的樣式規則的次序，具有更特殊選擇器的規則優(yōu)先于具有一般選擇器的規則，如果兩個(gè)規則的特殊性相同，那么后定義的規則優(yōu)先（這點(diǎn)很重要，這點(diǎn)很重要，這點(diǎn)很重要，也就是你定義的樣式，比如在css文件中，寫(xiě)在后面的樣式會(huì )覆蓋前面的樣式，因為引用樣式的時(shí)候是按照順序導入的，它會(huì )將一個(gè)標簽對應找到的所有樣式加載，后加載的如果和前面的重復就會(huì )覆蓋前面的樣式）。
我們把特殊性分為4個(gè)等級，我們首先得知道這個(gè)，這個(gè)等級并不代表你最后樣式得引用順序，我們需要在這個(gè)等級得基礎上能判斷出樣式得引用順序，4個(gè)等級如下：
內聯(lián)樣式，權重量級1000（1000這個(gè)數是不對的，只是為了好計算，見(jiàn)問(wèn)題4）。
內聯(lián)樣式是定義在html的標簽中的，如下的style屬性，直接嵌入到div標簽里：
<div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"></div>ID選擇器，權重量級100（100這個(gè)數是不對的，只是為了好計算，見(jiàn)問(wèn)題4）。
通過(guò)id來(lái)引用樣式，可以寫(xiě)在css文件中，也可以寫(xiě)在html中，在html中需要使用 <style></style> 括起來(lái)，在css文件中就不用，id前面使用#來(lái)判別：
<style> #content{ width: 200px; height: 200px; margin: 0 auto; background: #333333; }</style><body> <div class="contain" id="content"></div></body>類(lèi)和屬性選擇器，權重量級10（10這個(gè)數是不對的，只是為了好計算，見(jiàn)問(wèn)題4）。
同理id，用.來(lái)判別：
<style> .contain{ width: 200px; height: 200px; margin: 0 auto; background: #F7F7F7; }</style><body> <div class="contain" id="content"></div></body>標簽類(lèi)型和偽元素選擇器，權重量級1（1這個(gè)數是不對的，只是為了好計算，見(jiàn)問(wèn)題4）。
<style> body{ width: 200px; height: 200px; margin: 0 auto; background: #333333; }</style><body> <div class="contain" id="content"></div></body>注意：量級計算后的值越高不是優(yōu)先引用，前面說(shuō)過(guò)優(yōu)先引用的反而會(huì )被后引用的覆蓋掉，所以值越高反而是越后引用。
計算示例
你的樣式權重和你的寫(xiě)法有很大關(guān)系，對應到同一個(gè)標簽寫(xiě)法不同，樣式的權重就不同，如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #username{/*權重：100*1=100*/ font-size: 14px; color: #333333; } #users_info #username{/*權重：100*2=200*/ font-size: 15px; color: #1B6D85; } #users_info a{/*權重：100*1+1=101*/ font-size: 16px; color: #398439; } .user_info #username{/*權重：100*1+10*1=110*/ font-size: 17px; color: #66512C; } .user_info a{/*權重：10*1+1*1=11*/ font-size: 18px; color: #843534; } #in_block .user_info #username{/*權重：100*2+10*1=210*/ font-size: 19px; color: #8A6D3B; } .contain #in_block .user_info #username{/*權重：100*2+10*2=220*/ font-size: 20px; color: #C7254E; } #content #in_block .user_info a{/*權重：100*2+10*1+1*1=211*/ font-size: 21px; color: #F0AD4E; } </style> <body> <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"> <div id="in_block" class="left_content"> <div class="user_info" id="users_info"> <a id="username">注意我的字體大小和顏色</a> </div> </div> </div> </body></html>根據上面權重的計算可以知道不同寫(xiě)法樣式引用順序不同，權重越小會(huì )先引用，后面權重大的樣式如果出現和前面相同的屬性就會(huì )把之前的覆蓋掉。這里由于樣式都是字體和顏色的樣式，所以后面的會(huì )完全覆蓋掉先引用的。很明顯最后的樣式是權重為220的那個(gè)，如果我現在在權重為11的樣式中加入font-family: "微軟雅黑";是不會(huì )被覆蓋的，因為后面的都沒(méi)有出現font-family這個(gè)屬性。要知道上面的所有樣式都會(huì )被加載，只是出現重復定義的屬性才會(huì )根據權重大小來(lái)覆蓋重復的屬性。
問(wèn)題解決
問(wèn)題1：權重相同的兩個(gè)樣式都映射到一個(gè)標簽，哪一個(gè)會(huì )被覆蓋呢？
這就是除去權重后的又一個(gè)影響因素了，權重相同就和你的書(shū)寫(xiě)順序有關(guān)了，寫(xiě)在前面的會(huì )被后面的覆蓋，注意是前面被后面覆蓋掉，如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .user #username{/*權重：100*1+10*1=110*/ font-size: 14px; color: #333333; } #users_info .user_name{/*權重：100*1+10*1=110*/ font-size: 15px; color: #1B6D85; } </style> <body> <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"> <div id="in_block" class="left_content"> <div class="user" id="users_info"> <a class="user_name" id="username">注意我的字體大小和顏色</a> </div> </div> </div> </body></html>最后的樣式會(huì )是font-size: 15px;color: #1B6D85;，先定義先加載，先加載就很可能被后面的覆蓋。修改順序樣式就會(huì )改變?yōu)?code>font-size: 14px;color: #333333;，修改為如下：
<style> #users_info .user_name{/*權重：100*1+10*1=110*/ font-size: 15px; color: #1B6D85; } .user #username{/*權重：100*1+10*1=110*/ font-size: 14px; color: #333333; }</style>問(wèn)題2：權重相同，一個(gè)樣式定義在html中一個(gè)定義在css文件中，哪一個(gè)會(huì )被覆蓋呢？
樣式會(huì )和你的引入順序有關(guān)，在html中通過(guò)<style></style>定義的樣式實(shí)際上就是引入的css文件，只不過(guò)這個(gè)文件已經(jīng)在html中，不用再去走加載css文件這一步。所以你的引入順序決定了你的樣式，如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #users_info .user_name{/*權重：100*1+10*1=110*/ font-size: 15px; color: #1B6D85; } </style> <link rel="stylesheet" href="css/test.css"></link> <body> <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"> <div id="in_block" class="left_content"> <div class="user" id="users_info"> <a class="user_name" id="username">注意我的字體大小和顏色</a> </div> </div> </div> </body></html>test.css文件中內容為：
.user #username{/*權重：100*1+10*1=110*/ font-size: 14px; color: #333333;}上面這樣寫(xiě)法最后的樣式會(huì )是test.css文件中的樣式，原因就是<link rel="stylesheet" href="css/test.css"></link>后引用，后引用會(huì )覆蓋先引用的（前面說(shuō)過(guò)）。我們修改如下順序就可以讓它為<style></style>中的樣式了：
<link rel="stylesheet" href="css/test.css"></link><style> #users_info .user_name{/*權重：100*1+10*1=110*/ font-size: 15px; color: #1B6D85; }</style>問(wèn)題3：同一個(gè)標簽有多個(gè)類(lèi)名來(lái)修飾，類(lèi)名的先后順序對樣式有影響嗎？
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .left_posion{/*權重：10*1=10*/ font-size: 17px; color: #67B168; } .name_font{/*權重：10*1=10*/ font-size: 16px; color: #000000; } .user_name{/*權重：10*1=10*/ font-size: 15px; color: #1B6D85; } </style> <body> <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"> <div id="in_block" class="left_content"> <div class="user" id="users_info"> <a class="user_name name_font left_posion" id="username">注意我的字體大小和顏色</a> </div> </div> </div> </body></html>最后的樣式為.user_name的樣式，也就是說(shuō)class="user_name name_font left_posion"的三個(gè)類(lèi)是同級的，沒(méi)有區別，只和你樣式的權重和寫(xiě)的順序有關(guān)。
問(wèn)題4：（id、類(lèi)、標簽）的權重量級真的就是（100、10、1）嗎？
答案是否定的，如下，根據前面的計算方式明顯111大于101，可是使用的樣式卻是#username a的，說(shuō)明前面說(shuō)的什么量級1000、100、10、1都是錯的，這里特別指出，幾個(gè)類(lèi)別是沒(méi)有具體的值，它的區分方法是先看類(lèi)別，假設我包含id，你不包含，那我就能覆蓋你，如果你也包含id那就比個(gè)數，個(gè)數多的覆蓋個(gè)數少的，個(gè)數一樣就同理再看包含的類(lèi)，再看標簽個(gè)數，如果id、類(lèi)、標簽的個(gè)數都相同就看寫(xiě)的順序（以下代碼只是我為了說(shuō)明100不是定數，一般不會(huì )寫(xiě)十一個(gè)類(lèi)來(lái)定位標簽樣式。。。）：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .contain .c_1 .c_2 .c_3 .c_4 .c_5 .c_6 .c_7 .c_8 .c_9 .c_10 a{/*權重：10*11+1*1=111*/ font-size: 21px; color: #F0AD4E; } #username a{/*權重：100*1+1*1=101*/ font-size: 19px; color: #8A6D3B; } </style> <body> <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"> <div class="c_1"> <div class="c_2"> <div class="c_3"> <div class="c_4"> <div class="c_5"> <div class="c_6"> <div class="c_7"> <div class="c_8"> <div class="c_9"> <div class="c_10" <div class="c_1" id="username"> <a>注意我的字體大小和顏色</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body></html>問(wèn)題5：跳級引用，跳過(guò)標簽的縮少對樣式有影響嗎？
答案是沒(méi)有影響，.c_1 a跳了一級標簽但是毫無(wú)影響，兩個(gè)都是包含一個(gè)類(lèi)，一個(gè)標簽，所以樣式看兩個(gè)的先后順序：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .c_1 a{/*權重：x*1+y*1*/ font-size: 19px; color: #8A6D3B; } .c_2 a{/*權重：x*1+y*1*/ font-size: 21px; color: #F0AD4E; } </style> <body> <div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"> <div class="c_1"> <div class="c_2"> <a>注意我的字體大小和顏色</a> </div> </div> </div> </body></html>寫(xiě)文章不容易，有問(wèn)題請指出不要踩好嗎，感謝大家。
聯(lián)系客服
