寫在前面

權重這個概念，相信對許多進行過前端開發的小伙伴來說肯定并不陌生，有時候一個樣式添加不上，我們就會一個 !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，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/121960.html

標籤：Html/Css

上一篇：css復雜影片（animation屬性）

下一篇：1.html基礎知識

前端深入之css篇|你真的了解“權重”嗎？

寫在前面

探索權重

簡單練習

深入思考

結論

結語