前端深刻之css篇|你真的瞭解「權重」嗎？

寫在前面

權重這個概念，相信對許多進行過前端開發的小夥伴來講確定並不陌生，有時候一個樣式添加不上，咱們就會一個 !important 懟上去，一切就好像迎刃而解了。但還有的時候，!important也並不能解決咱們的問題，下面請跟隨我來詳細瞭解一下css的權重吧！

探索權重

指某一因素或指標相對於某一事物的重要程度，其不一樣於通常的比重，體現的不只僅是某一因素或指標所佔的百分比，強調的是因素或指標的相對重要程度，傾向於貢獻度或重要性。

以上是摘自百度百科對「權重」的解釋。css中權重就至關於不一樣選擇器之間的排名，那麼權重是怎樣計算的呢？

• 標籤選擇器 1
• 類選擇器 10
• id選擇器 100
• 行內樣式 1000
• !important ∞（正無窮）

這也就是爲何咱們更改樣式不起做用的時候喜歡用!important的緣由了，由於放上去就是無窮大，彷彿全部樣式均可以正常使用了。但!important真的有這麼神奇嗎？不妨往下看。

簡單練習

分析如下代碼中文字的最終顏色。

<div class="myClass" id="myId" style="color:yellow; /* 權重1000 */">不是酸檸檬</div>
<style>
div{
    color: pink; /* 權重1 */
}
.myClass{
    color: red; /* 權重10 */
}
#myId{
    color: blue; /* 權重100 */
}
</style>

經過代碼，能夠很清楚的瞭解到權重最大的是1000，因此當前文字應該如今爲yellow黃色。

接下來咱們加大難度試試。

<div class="myClass" id="myId" style="color:yellow; /* 權重1000 */">不是酸檸檬</div>
<style>
div{
    color: pink; /* 權重1 */
}
.myClass{
    color: red !important; /* 權重 ？ */
}
#myId{
    color: blue !important; /* 權重 ？*/
}
</style>

這裏文字會顯示會顯示爲blue藍色，由於此時類選擇器的權重是∞+10，id選擇器的權重是∞+100因此顯示爲id選擇器的顏色。

那若是我就想讓他顯示紅色呢？我嘗試如下代碼

.myClass{
    color: red  !important !important; /* 權重 ？ */
}

sorry，!important這樣用會形成報錯，!important的做用是給當前樣式加權重，但不能屢次疊加。

深刻思考

<div class="myClass" id="myId" style="color:yellow;">不是酸檸檬</div>
<button onclick="document.querySelector('#myId').style.color='green'">改變顏色</button>
<style>
div{
    color: pink;
}
.myClass{
    color: red !important; 
}
#myId{
    color: blue !important;
}
</style>

若是不點擊按鈕，那麼文字的顏色將會是id選擇器的顏色藍色，可是點擊按鈕後是要給元素添加顏色的，此時會顯示什麼顏色呢？

其實多思考如下就能想到，咱們經過id找到了這個元素，而後修改他的顏色，因此本質上修改的是這個div的顏色，也就是行內元素，可是此時id選擇器的權重最大，因此點擊按鈕以後是不會修改爲咱們想要的綠色的。

那麼若是在js中修改時給綠色加權重呢，不妨試一下如下代碼

<button onclick="document.querySelector('#myId').style.color='green !important'">改變顏色</button>

sorry，!important也不能這樣使用，這不符合js的語法規則，因此不管如何點擊，顏色都不會改變的。

結論

經過以上實例，咱們瞭解到了，簡單好用的!important在一些場景裏也是很差用的，尤爲是當你隨手拿來一個庫使用的時候，你瞭解不到它內部的權重分佈，因此樣式操做起來也不可以駕輕就熟。

固然你也不用糾結，一個優秀的庫或者框架都是不多使用!important的，當你發現你的樣式做用不上的時候，徹底能夠利用id選擇器來增長權重，實現你想要的效果。

!important雖好，也不要亂用哦~

結語

以上就是本文章的所有內容了，若是有不正確的地方歡迎指正。

感謝您的閱讀，若是感受有用不妨點贊/轉發。

前端深刻系列是一個踩坑系列，是由我本人對工做和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。

前端路漫，踩坑不斷。

前端深刻系列持續更新中……

以上2019-9-27。