編碼的世界 / 優質文選 / 生涯

CSS樣式沒顯示為什麼?往這看!


2022年3月25日
-   

                                     CSS選擇器權重問題~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~開發工具與關鍵技術: Dreamweaver CSS選擇器權重問題
作者:戴偉雄撰寫時間:2019年1月16日~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
我們在寫CSS樣式的時候有可能出現這樣的問題就是說寫完樣式後樣式卻沒有發生改變,如果代碼沒有問題那麼就可能是我們的權重產生問題了。
我們這裏來說一下css選擇器權重的大小
1、看下面兩圖,圖一我通過大部分常用的選擇器設置的div的樣式,而通過圖二的顯示可以看出來它選擇了內聯樣式的一個樣式顯示可以得出在圖一中內聯的權重最大


2、然後把內聯樣式去除可以看出瀏覽器顯示了ID選擇器的樣式,由此可以看出ID選擇器的權重在我舉例中次於內聯選擇器


 
3、再接著往下把ID選擇器注釋掉瀏覽器顯示的類選擇器的樣式,由此得出在此次舉例中類的權重再第三
 


 
4、再接著往下就不用說了把類選擇器注釋掉瀏覽器顯示的是標簽選擇器的樣式,由此得出在此次舉例中標簽權重最小。
 
其實在css內部已經定義好了樣式的權重值,
標簽:+1      類:+10        ID:+100      內聯樣式:+1000
 
如果你設置的兩種樣式那麼權重大的就會把小的給覆蓋掉,還有權重是可以相加的所以如果發現權重不夠是可以加權重的。
 
但這裏有一個特殊情況 !important  通過下圖可以看到我在標簽選擇器的樣式後加了!important 理應它的樣式會被後面的ID樣式覆蓋但它沒有原因正是!important的影響,它會強制設置樣式,這種方式不到萬不得以不推薦使用因為你以後更改樣式的就有些困難。

熱門文章