三種方法的優先級

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

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

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

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

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

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

其實總結來說，就是--就近原則（離被設定元素越近優先等級越高）。

繼續學習

新建檔案

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>样式网页</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> span{ color:red; } </style> </head> <body> <p>PHP中文网，<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p> </body> </html>

提交重置程式碼

自動運行