三種方法的優先級LOGIN

三種方法的優先級

如果有一種情況:對於同一個元素我們同時用了三種方法來設定css樣式,那麼哪一種方法真正有效呢?在右邊編輯器就出現了這種情況

1、使用內聯式CSS設定「超酷的網路」文字為粉紅色

2、然後使用嵌入式CSS來設定文字為紅色

3、最後又使用外部式設定文字為藍色(style.css檔案中設定)。

但最終你可以觀察到「超酷的網路」這個短字的文字被設定為了粉紅色。因為這三種樣式是有優先權的,記得他們的優先權:內嵌式 > 嵌入式> 外部式

但是嵌入式 >外部式有一個前提:嵌入式css樣式的位置一定在外部式的後面。如右邊代碼編輯器就是這樣,<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面(實際開發中也是這麼寫的)。有興趣的朋友可以試一下,把它們調換順序,再看他們的優先順序是否改變。

其實總結來說,就是--就近原則(離被設定元素越近優先等級越高)

下一節
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
章節課件