三種方法的優先級

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

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

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

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

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

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

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

繼續學習

新建檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX