【DAY15】權重？壓的你心發寒。

2018 iT 邦幫忙鐵人賽

DAY 15

Modern Web

勇者Jason和前端之鑰系列第 15 篇

2018鐵人賽

JasonYang

團隊Lorem100+tab

2018-01-03 08:17:36

1883 瀏覽

分享至

記得我在【DAY5】曾經說過的一個詞「權重」，
今天就來算一下權重吧！

根據w3c，我們可以將各種selectors（選擇器）分類，給他權重。

首先，我們先建立一個環境吧！

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">    
</head>
<body>
    <div class="test" id="test"></div>
    <div class=“test test2" id="test"></div>
</body>
</html>
</html>

id selector理論上只會有一個，但是我想要試看看兩個是否都會吃到CSS，
因此，我們在兩個<div>都給了#test。

style.css

.test{
    background-color: green;
}
.test2{
    background-color: blue;
}
#test{
    background-color: yellow;
}

如圖

很明顯，兩個都吃到了，而且id selector權重壓過其他。
接著我們拿掉#test，讓.test能重見天日。

style.css

.test{
    background-color: green;
}
.test2{
    background-color: blue;
}

會發現長這樣，即後寫的CSS樣式會蓋過前面寫的CSS樣式，
那問題來了：

是index.html的class裡面後寫的樣式，還是style.css裡面後寫的樣式呢？

再來修改一下index.html。

index.html

<div class=“test" id="test"></div>
<div class=“test2 test” id="test"></div>

會發現什麼都沒變，
因此，再修改style.css

style.css

.test2{
    background-color: blue;
}
.test{
    background-color: green;
}

會發現都變成綠色了。
因此，得知在相同權重下，style.css裡面的順序才會影響樣式。

我們再次修改style.css

style.css

body>.test{
    background-color: green;
}
.test2{
    background-color: blue;
}

會發現明明應該要顯現的.test2卻被.test覆蓋了。
這就是權重的影響。
權重影響>css順序

因此我當初寫過：

body>.container>ul>li>a>img{
    width:100%;
}

這種東西，會導致後面再怎麼修改都不會起反應的情形發生。

當然遇到這種問題的時候還是有暴力解法，
那就是!important。

style.css

body>.test{
    background-color: green;
}
.test2{
    background-color: blue !important;
}
#test{
    background-color: yellow;
}

連加了#test，依然壓不過!important，
但是!important還是不要隨便用，
因為一旦用了，很容易造成維護上的困難。

另外，也有自身增加權重的辦法
沙烏地阿拉伯的俗諺說過

一個不夠，你可以吃兩個。

.test.test{
    background-color: green;
}
.test2{
    background-color: blue;
}

這樣的話，兩個<div>都會呈現綠色。

再來回顧w3c

我們可以得知
id selector權重是a；
class selector、屬性selector(ex: [ ])、偽類selector(ex: a:visited)，權重是b；
type selectors(ex: ul、li)、pseudo-elements (ex: test::after)，權重是c；
通用selector可以忽略。
然後按照a-b-c排列即可得到權重。

但是這個並不是百進位的，

style.css

body>.test{
    background-color: green;
}
.test2.test2.test2.test2.test2...{
    background-color: blue !important;
}
#test{
    background-color: yellow;
}

其中我的test2寫了超過一百次還是壓不過id selector。
所以我也不知道a-b-c要怎麼顯示了XD