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

css中三種方法的優先級


2022年5月08日
-   

學習css有段時間了,前幾天考慮到一個問題,就是同時使用css的三種方法對同一個元素進行設置樣式,那麼最後實際的樣式會是三種中的哪一個呢!
咱們先用三種方法對同一個元素設置樣式

1、使用內聯式CSS設置文字顏色為紅色,
2、然後使用嵌入式CSS來設置文字為藍色
3、最後又使用外部式設置文字為黃色(style.css文件中設置)

最後在瀏覽器中可以清晰的看到文字最後顯示顏色為藍色,
看到這裏我們可以下結論,三種中嵌入式css的優先級最高。
現在咱們刪掉嵌入式css,使用其他兩種方法再試一下

1、使用內聯式CSS設置文字顏色為紅色,
2、然後使用外部式設置文字為黃色(style.css文件中設置)

最後在瀏覽器中我們可以看到文字顯示的是紅色,這裏我們可以下結論說內聯式css比外部樣式的優先級要高,但是我們要注意一個地方,在我們的HTML文件中head元素裏面我們是將外部樣式表放在內聯的前面,現在我們將兩個的樣式表的位置調換一下看是什麼結果


可以很清楚的看到在只是調換內聯式和外部樣式表的情況下,文字的顏色變成的外部樣式表裏面的設置的顏色,到這裏我們可以下結論,在內聯式和外部式這兩種方法中存在一個就近原則,也就是說,兩個樣式表對同一個元素設置樣式時,最後顯示哪個樣式表中設置的樣式跟這個樣式表距離元素的遠近有關系,哪個元素離樣式表近就會優先顯示哪個裏面的樣式。

熱門文章