css樣式順序覆蓋方式及權(quán)重計算詳解

看見就非常 2020-04-29

展開全文

寫在前面

在用Django寫一個項目時，由于多個網(wǎng)頁一些元素的css樣式是重復的，所以就寫了該元素的一般樣式，比如a標簽在很多頁面都會出現(xiàn)，我們就把這些頁面的a標簽共同樣式寫到css中。當某個頁面中a標簽和一般樣式不一樣的時候我們就需要重寫a標簽的樣式來覆蓋原來的一般樣式。這看似簡單，但是當你的標簽里的內(nèi)容寫復雜了之后，你就容易混淆了。
我一個做后臺的，之前學習的時候找了半天都找不到我想要的，都是些最基本的使用，最后竟還是自己debug解決的，所以寫下這篇比較詳細的博客希望對和我一樣有需要的人有所幫助。

CSS選擇器的權(quán)重與優(yōu)先規(guī)則

我們在使用CSS對網(wǎng)頁元素定義樣式時經(jīng)常會遇到這種情況：要對一般元素應用一般樣式，然后在更特殊的元素上覆蓋它們。那么我們怎么樣來保證我們所新定義的元素樣式能覆蓋目標元素上原有的樣式呢？

在CSS中，會根據(jù)選擇器的特殊性來決定所定義的樣式規(guī)則的次序，具有更特殊選擇器的規(guī)則優(yōu)先于具有一般選擇器的規(guī)則，如果兩個規(guī)則的特殊性相同，那么后定義的規(guī)則優(yōu)先（這點很重要，這點很重要，這點很重要，也就是你定義的樣式，比如在css文件中，寫在后面的樣式會覆蓋前面的樣式，因為引用樣式的時候是按照順序?qū)氲?，它會將一個標簽對應找到的所有樣式加載，后加載的如果和前面的重復就會覆蓋前面的樣式）。

我們把特殊性分為4個等級，我們首先得知道這個，這個等級并不代表你最后樣式得引用順序，我們需要在這個等級得基礎(chǔ)上能判斷出樣式得引用順序，4個等級如下：

內(nèi)聯(lián)樣式，權(quán)重量級1000（1000這個數(shù)是不對的，只是為了好計算，見問題4）。

內(nèi)聯(lián)樣式是定義在html的標簽中的，如下的style屬性，直接嵌入到div標簽里：
```
<div class="contain" id="content" style="width: 200px;height: 200px;margin: 0 auto;background: #C4E3F3;"></div>
```
ID選擇器，權(quán)重量級100（100這個數(shù)是不對的，只是為了好計算，見問題4）。

通過id來引用樣式，可以寫在css文件中，也可以寫在html中，在html中需要使用 <style></style> 括起來，在css文件中就不用，id前面使用#來判別：
```
<style>
    #content{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: #333333;
    }
</style>
<body>
    <div class="contain" id="content"></div>
</body>
```

類和屬性選擇器，權(quán)重量級10（10這個數(shù)是不對的，只是為了好計算，見問題4）。

同理id，用.來判別：

<style>
    .contain{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: #F7F7F7;
    }
</style>
<body>
    <div class="contain" id="content"></div>
</body>

標簽類型和偽元素選擇器，權(quán)重量級1（1這個數(shù)是不對的，只是為了好計算，見問題4）。
```
<style>
    body{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background: #333333;
    }
</style>
<body>
    <div class="contain" id="content"></div>
</body>
```
注意：量級計算后的值越高不是優(yōu)先引用，前面說過優(yōu)先引用的反而會被后引用的覆蓋掉，所以值越高反而是越后引用。

計算示例

你的樣式權(quán)重和你的寫法有很大關(guān)系，對應到同一個標簽寫法不同，樣式的權(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)重的計算可以知道不同寫法樣式引用順序不同，權(quán)重越小會先引用，后面權(quán)重大的樣式如果出現(xiàn)和前面相同的屬性就會把之前的覆蓋掉。這里由于樣式都是字體和顏色的樣式，所以后面的會完全覆蓋掉先引用的。很明顯最后的樣式是權(quán)重為220的那個，如果我現(xiàn)在在權(quán)重為11的樣式中加入font-family: "微軟雅黑";是不會被覆蓋的，因為后面的都沒有出現(xiàn)font-family這個屬性。要知道上面的所有樣式都會被加載，只是出現(xiàn)重復定義的屬性才會根據(jù)權(quán)重大小來覆蓋重復的屬性。

問題解決

問題1：權(quán)重相同的兩個樣式都映射到一個標簽，哪一個會被覆蓋呢？

這就是除去權(quán)重后的又一個影響因素了，權(quán)重相同就和你的書寫順序有關(guān)了，寫在前面的會被后面的覆蓋，注意是前面被后面覆蓋掉，如下：

<!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>

最后的樣式會是font-size: 15px;color: #1B6D85;，先定義先加載，先加載就很可能被后面的覆蓋。修改順序樣式就會改變?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>

問題2：權(quán)重相同，一個樣式定義在html中一個定義在css文件中，哪一個會被覆蓋呢？

樣式會和你的引入順序有關(guān)，在html中通過<style></style>定義的樣式實際上就是引入的css文件，只不過這個文件已經(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;
}

上面這樣寫法最后的樣式會是test.css文件中的樣式，原因就是<link rel="stylesheet" href="css/test.css"></link>后引用，后引用會覆蓋先引用的（前面說過）。我們修改如下順序就可以讓它為<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>

問題3：同一個標簽有多個類名來修飾，類名的先后順序?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的樣式，也就是說class="user_name name_font left_posion"的三個類是同級的，沒有區(qū)別，只和你樣式的權(quán)重和寫的順序有關(guān)。

問題4：（id、類、標簽）的權(quán)重量級真的就是（100、10、1）嗎？

答案是否定的，如下，根據(jù)前面的計算方式明顯111大于101，可是使用的樣式卻是#username a的，說明前面說的什么量級1000、100、10、1都是錯的，這里特別指出，幾個類別是沒有具體的值，它的區(qū)分方法是先看類別，假設(shè)我包含id，你不包含，那我就能覆蓋你，如果你也包含id那就比個數(shù)，個數(shù)多的覆蓋個數(shù)少的，個數(shù)一樣就同理再看包含的類，再看標簽個數(shù)，如果id、類、標簽的個數(shù)都相同就看寫的順序（以下代碼只是我為了說明100不是定數(shù)，一般不會寫十一個類來定位標簽樣式。。。）：

<!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>

問題5：跳級引用，跳過標簽的縮少對樣式有影響嗎？

答案是沒有影響，.c_1 a跳了一級標簽但是毫無影響，兩個都是包含一個類，一個標簽，所以樣式看兩個的先后順序：

<!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>

寫文章不容易，有問題請指出不要踩好嗎，感謝大家。