CSS權重

CSS權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。

權重的等級

可以把樣式的應用方式分為幾個等級，按照等級來計算權重

1、!important，加在樣式屬性值后，權重值為 10000
2、內聯樣式，如：style=””，權重值為1000
3、ID選擇器，如：#content，權重值為100
4、類，偽類和屬性選擇器，如： content、:hover 權重值為10
5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1
6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0

權重的計算實例

1、實例一：

<style type="text/css">div{color:red !important;} </style> ...... <div style="color:blue">這是一個div元素</div> <!-- 兩條樣式同時作用一個div，上面的樣式權重值為10000+1，下面的行間樣式的權重值為1000， 所以文字的最終顏色為red -->

2、實例二：

<style type="text/css">#content div.main_content h2{color:red; }#content .main_content h2{color:blue;} </style> ...... <div id="content"><div class="main_content"><h2>這是一個h2標題</h2></div> </div> <!-- 第一條樣式的權重計算： 100+1+10+1，結果為112； 第二條樣式的權重計算： 100+10+1，結果為111； h2標題的最終顏色為red -->

轉載于:https://www.cnblogs.com/fwl8888/p/9184658.html

總結

以上是生活随笔為你收集整理的CSS权重的等级划分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。