1. 程式人生 > >CSS的3種樣式的優先順序

CSS的3種樣式的優先順序

如下兩圖,對於同一個元素我們同時用了三種方法設定css樣式
源自慕課網
源自慕課網
1、使用內聯式CSS設定“超酷的網際網路”文字為粉色。
2、然後使用嵌入式CSS來設定文字為紅色。
3、最後又使用外部式設定文字為藍色(style.css檔案中設定)。

但最終你可以觀察到“超酷的網際網路”這個短詞的文字被設定為了粉色。因為這三種樣式是有優先順序的,記住他們的優先順序:內聯式 > 嵌入式 > 外部式

但是嵌入式>外部式有一個前提:嵌入式css樣式的位置一定在外部式的後面。如右程式碼編輯器就是這樣,<link href=“style.css” …>程式碼在程式碼的前面(實際開發中也是這麼寫的)。感興趣的小夥伴可以試一下,把它們調換順序,再看他們的優先順序是否變化。

其實總結來說,就是–就近原則

離被設定元素越近優先級別越高。

但注意上面所總結的優先順序是有一個前提:內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下,