css選擇器權重和超越`!important`

div span#text {width: 200px;}
div span.text {width: 100px;}
複製程式碼

根據選擇器優先順序：!important,style,id,class,:after,div.不難得出最後寬度200px，換個思路再看下面

div span#text {width: 200px;}
div span.text {width: 100px!important;min-width: 120px;}
或者
div span#text {width: 200px;}
div span.text {width: 100px!important;min-width: 80px;}
複製程式碼

這個時候呢？根據剛剛我們說的選擇器優先順序來說答案還是200，但是我們程式一向用事實說話，測試一番以後發現答案是width: 100px!important;min-width: 120px;，我們來說下為什麼：在css中，!important的權重相當的高，但是由於寬高會被max-width/min-width覆蓋，所以!important會失效，所以上面程式碼計算之後會被引擎解析成：div span.text {width: 100px!important;min-width: 80px;}，好了今天我們就解釋到這裡了。