前端 CSS權重詳解
阿新 • • 發佈:2019-01-28
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 -->