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