這篇博文有關css的權重問題,我我的認爲這是css知識中很重要的一個知識點。由於在開發的過程能中咱們會常常遇到這種問題,特別是若是你使用框架的時候,有些框架的某些標籤有一些默認的樣式。因此咱們能夠經過增長權重的方式來使咱們所寫的樣式有效。既然說到權重那就必然要提及權重的等級以及權重值。css
css的權重等級能夠分爲5個級別:html
1.第一級別:內聯樣式,詳細你們都知道什麼是內聯樣式,既是在標籤添加style屬性<div style=""></div>,這種方式權重值最高,權重值爲1000,可是開發過程當中比較少用到這種,由於如今推薦的方式都是將css,js,html寫成單獨文件。這樣子看起來會比較整潔以及方便管理。css3
2.第二級別:ID選擇器,id選擇器就是使用"#"開頭選擇,你們應該都明白,這種選擇方式的權重值爲0100。框架
3.第三級別:class選擇器,class選擇器就是使用"."開頭的選擇器,這種選擇方式的權重值爲0010.測試
4.第四級別:標籤選擇器以及僞類選擇器,就是直接使用標籤或者僞類選擇器,這種兩種選擇方式的權重值都爲0001.字體
5.這裏提醒一下通用選擇器(*),子選擇器(>)和相鄰同胞選擇器(+)這三種是沒有權重的,也就是權重值爲0000,雖然沒有權重 可是比繼承樣式權重高;這裏值得提醒一下,並不是全部的僞類選擇器的權重都爲i,總一些領導家的孩子,像a:link,a:visited僞類選擇器,他們的權重比第三級別class選擇器的權重還高。spa
這裏要提醒一下,這裏的權重並非10進制,不過在比比較的時候能夠看成十進制去疊加。htm
案例blog
測試結果
繼承
這裏p.c的權重值爲0011,.c的權重值爲0010,因此字體會顯示藍色
固然,若是是從上到下多層次選擇也是同樣的
測試結果
這裏的權重和上面也是同樣的div .c權重爲0011,.c權重值爲10
案例(測試僞類選擇器)
測試結果
是否是,對不對,我沒有說謊嘛
其實權重計算方法是這樣子大同小異的
博文最後要講一個最重量級別權重的東西,這傢伙可不止是領導的兒子,簡直就是太子來的,這個就是
!important
你沒有看錯,就是樓上的那個 !important 這個傢伙,他能夠將你所要呈現的樣式的權重提的比行內樣式還高,我舉個例子來講明他的用法
運行結果
有木有,有木有,明明使用的是行內樣式,可是顯示的倒是綠色,彷彿被戴了綠帽
不過這個是樣式是的權重,並不是是選擇器的權重,就是說和上面說的選擇器權重不衝突,可是他卻能夠改變某些你也想要改變的樣式。
好了,上面內容就是css3的權重介紹