css樣式優先級


多重樣式優先級:如果外部樣式、內部樣式和內聯樣式同時應用於同一個元素,就是使多重樣式的情況。一般情況下,優先級如下:
(內聯樣式)Inline style >(內部樣式)Internal style sheet >(外部樣式)External style sheet 
 有個例外的情況,就是如果外部樣式放在內部樣式的后面,則外部樣式將覆蓋內部樣式。
 
css選擇器權重計算方式一:
將特殊性分為4個等級
a.第一等,行內樣式,權值為1000
b.第二等,id選擇器,權值為100
c.第三等,class選擇器,權值10
d.第四等,類型選擇器和偽元素選擇器,權值為1
通用選擇器(*),子選擇器(>)和相鄰同胞選擇器(+)並不在這四個等級中,所以他們的權值都為0。
But,這個計算方式其實是有點問題的。。。
 
正確的計算方式如下所示:
CSS選擇器權重計算方式二:
1.A:如果是行內樣式,A=1,否則A=0;
2.B:計算該選擇器中ID的數量。
3.C:計算該選擇器中class、偽類、屬性選擇器等的數量。
4.D:計算該選擇器中偽元素及標簽的數量。
計算權重值時,A,B,C,D四組值,從左到右,分組比較。如果A相同,比較B,如果B相同,比較C,如果C相同,比較D,如果D相同,后定義的優先。
 
舉個栗子:樣式一:body header div navulli div p a span em {color: red}
                  樣式二:.count {color: blue}
按照計算方法一,樣式一的權重值是11,樣式二的權重值是10,如果這兩條規則用於同一個元素,則該元素應該是紅色,實際結果卻是藍色。
 
CSS 優先級法則:
A  選擇器都有一個權值,權值越大越優先;
B  當權值相等時,后出現的樣式表設置要優於先出現的樣式表設置;
C  創作者的規則高於瀏覽者:即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式;
D  繼承的CSS 樣式優先級低於后來指定的CSS 樣式;
E  在同一組屬性設置中標有“!important”規則的優先級最大。
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM