# CSS 權重 ## (css specificity) --- ## 先說簡易的結論 inline style > ID > Class > Element --- ## 那麼來賦予他們分數 ![](https://i.imgur.com/5Jrgxd1.png) --- ## Element ```css= div, p, ul, ol, li, em, header, footer, article.... ``` ![](https://imgur.com/K58jk2e.jpg) --- ## Class ```css= .box ``` ![](https://imgur.com/I45U9g6.jpg) --- ## ID ```css= #product ``` ![](https://imgur.com/v99Em6B.jpg) --- ## inline style ```htmlmixed= <div style="color:red"> CSS Specificity </div> ``` ![](https://imgur.com/Se9ToiV.jpg) --- ## * ```css= 全站預設值(all element) * padding: 0 margin: 0 ``` --- ## * ```css= 全站預設值 * padding: 0 margin: 0 ``` ![](https://imgur.com/WMGVmEC.jpg) --- ### 那麼來算分數吧！ ul>li body div ul li a span ---- ### li.myclass ---- ### li.myclass ~ li ---- ### #good.idea a ---- ### #my #book .good p ---- ### style="background: #000" --- ### 那這個咧？ [type:checkbox] :only-of-type ---- form input[type=email] ---- li:nth-child(2) p ---- li.class:nth-of-type(2) --- # 終極大魔王 --- ## !important ![](https://imgur.com/FnlSGD9.jpg) --- ## 只有 !important 能超越 !important ### 所以沒事不要亂用 XD --- ## 結論 !important > inline style > ID > Class/psuedo-class(偽類)/attribute（屬性選擇器） > Element [CSS 權重計算工具](http://specificity.keegan.st/) [CSS 權重說明圖](http://cssspecificity.com/)