大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時候，有三種引入方式,這裡簡單介紹下CSS控制樣式的三種方式
好了，直入主題，大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時候，有三種引入方式，分別是：
1>外部樣式表 : 將樣式規則直接寫在*.css檔案中，然後再*.html頁面中通過<link>標籤引入的方式
2>內部樣式表 :（位於 <head> 標籤內部）
3>內聯樣式 :（在 HTML 元素內部）
按照W3School網站(點這裡直達)的說法，當同一個 HTML 元素被不止一個樣式定義時，它們是有優先順序之分的，如下，將優先順序從小到大排列出來，其中4的優先順序最高：
1.瀏覽器預設設定
2.外部樣式表
3.內部樣式表（位於 <head> 標籤內部）
4.內聯樣式（在 HTML 元素內部）
對於這個結論，相信大家一定有很多疑問，而網上很多都是直接對官網的內容進行複製然後粘貼發布就算了，讓我們非常厭倦和煩惱，所以，在這裡讓我們一起來驗證對比下。
注意：本次驗證主要針對後面3個優先順序，關於瀏覽器預設設定這個，相信大家都知道，他一定是最低的，我們在此就不過多的舉例驗證了。
一、驗證環境的描述
瀏覽器：FireFox 22.0
語言：HTML 4.01/CSS
開發工具:Aptana Studio 3
二、使用三種方式直接對標籤進行元素定義樣式
1>首先，我們先直接使用外部樣式表來定義p標籤的樣式：
xiaoxuetu.css
p { color:blue }
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /></p><p> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> </head> <body> <p>外部樣式表</p> </body></html>
顯示效果：
下面我們開始驗證吧。
2>外部樣式表 VS 內部樣式表（先定義內部樣式表，再引入外部樣式表定義檔案） 加入內部樣式表，也就是說，直接在<head>標籤中定義樣式規則，這個時候我們修改一下xiaoxuetu.html中的代碼：
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <style type="text/css" media="screen"> p { color: green } </style> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> </head> <body> <p>外部樣式表(藍色) VS 內部樣式表(綠色)</p> </body></html>
顯示效果：
得出優先順序結果：外部樣式表 > 內部樣式表
3>外部樣式表 VS 內部樣式表（先引入外部樣式表定義檔案，再定義內部樣式表）這步很簡單，其實就是直接將link標籤剪下移動到上面到head標籤中定義內部樣式表的前面：
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> <style type="text/css" media="screen"> p { color: green; } </style> </head> <body> <p>外部樣式表(藍色) VS 內部樣式表(綠色)</p> </body> </html>
顯示效果：
得出優先順序結果：內部樣式表 > 外部樣式表
從<2>和<3>這兩部測試我們可以知道，在直接對標籤的樣式進行定義時，外部樣式表和內部樣式表的優先與他們的引入順序有關,嘿嘿，是不是很慶幸沒有完全相信官網所說的咧……
4>外部樣式表 VS 內聯樣式 直接在p標籤中定義樣式，這個時候我們修改下xiaoxuetu.html的代碼：
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/> </head> <body> <p style="color:red;">外部樣式表(藍色) VS 內聯樣式(紅色)</p> </body> </html>
顯示效果：
得出優先順序結果：內聯樣式 > 外部樣式表
5>內聯樣式 VS 內部樣式表，這個時候我們修改下xiaoxuetu.html代碼：
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <style type="text/css" media="screen"> p { color: green } </style> </head> <body> <p style="color:red;">內部樣式表(綠色) VS 內聯樣式(紅色)</p> </body> </html>
顯示效果：
得出優先順序結果：內聯樣式 > 內部樣式表
從上面步驟<2>到<5>的對比中我們可以知道:內部樣式的優先順序是最大的，而內部樣式表和外部樣式表的優先順序得看他們的引入和定義順序，如果先用內部樣式表定義了樣式，然後再引入通過外部樣式表定義的樣式，你們外部樣式表的樣式將會覆蓋內部樣式表定義的樣式，反之亦是一樣。
當然，這個情況只是用id或者class選擇的時候，也是一樣的。如果對一個標籤的樣式定義既有class也有id選取器的時候，同時又包含了三種樣式定義方式的，就得先看完下面的優先順序測試了。
三、判斷用id、class以及標籤選取器定義樣式的優先順序
本次測試中，為了減少其他因素的影響，只採用內部樣式表來定義樣式，同時分別使用了ID選取器和Class選取器來選擇使用樣式的標籤。
1>三種方式並存的時候
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <style type="text/css" media="screen"> fieldset { width: 50% } p { color: red; } #idtest { color: green; } .classtest { color: blue; } </style> </head> <body> <fieldset> <legend>單一顯示效果</legend> <p id="idtest">只使用ID(綠色)</p> <p class="classtest">只使用Class(藍色)</p> </fieldset> <p> </p> <fieldset> <legend>先引入ID定義的樣式再引入Class定義的樣式</legend> <p id="idtest" class="classtest">小學徒</p> </fieldset> <p> </p> <fieldset> <legend>先引入Class定義的樣式再引入ID定義的樣式</legend> <p id="idtest" class="classtest">小學徒</p> </fieldset> </body> </html>
顯示效果：得出優先順序結果 id選取器 > class選取器 > 標籤選取器
2>當只有兩個class或者兩個id的時候
xiaoxuetu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <style type="text/css" media="screen"> #idtest { color: green; } #idtest2 { color: YellowGreen; } .classtest { color: blue; } .classtest2 { color: yellow; } </style> </head> <body> <fieldset> <legend>兩個class的時候</legend> <p class="classtest2" class="classtest">classtest2(黃色)先classtest(藍色)後</p> <p class="classtest" class="classtest2">classtest(藍色)先classtest2(黃色)後</p> </fieldset> <p> </p> <fieldset> <legend>兩個id的時候</legend> <p id="idtest" id="idtest2">idtest(綠色)先idtest2(黃綠色)後</p> <p id="idtest2" id="idtest">idtest2(黃綠色)先idtes(綠色)t後</p> </fieldset> </body> </html>
顯示效果：
得出優先順序結果：若且唯若有兩個或者是多個class或者id的時候，誰在前面就誰的優先順序高。
3>只有標籤p選取器的時候
xiaoxuetu.html(藍色樣式先，紅色樣式後)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <style type="text/css" media="screen"> p { color: blue; } p { color: red; } </style> </head> <body> <p>藍色樣式先，紅色樣式後</p> </body> </html>
顯示效果：
xiaoxuetu2.html(紅色樣式先，藍色樣式後)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS樣式表優先順序測試</title> <meta charset="UTF-8" /> <style type="text/css" media="screen"> p { color: red; } p { color: blue; } </style> </head> <body> <p>紅色樣式先，藍色樣式後</p> </body> </html>
顯示效果:
從兩個結果我們可以知道，當只有標籤選取器的時候，後面定義的樣式表的優先順序就越高。
四、總結
1.當只使用id選取器、class選取器或者標籤選取器的時候，不管是使用多少種樣式表定義方式，都是內嵌樣式的優先順序最高，接下來外部樣式表和內部樣式表的就得看他們的引入順序了;
2.當只使用id選取器或者class選取器的時候，同一個標籤內不管使用了多少個，都是排在前面的優先順序更高;
3.當只使用標籤選取器的時候，如果定義了多個一樣的，你們寫在最後面的標籤選取器生效，也就是它的優先順序最高;
4.當同一個標籤中既有id選取器，又有class選取器，同時又有標籤選取器的時候，優先順序的次序是id選取器 > class選取器 > 標籤選取器;
5.當每一種都有的時候，那就根據具體情況具體分析吧，嘿嘿，哈哈……
恩，這篇文章我很用心寫的哦，如果大家覺得好，麻煩點擊一下贊吧，又或者你有什麼疑問或者不一樣的意見，歡迎留言討論哦，因為白天要上班，所以我會在晚上有空的時候及時處理的，還請見諒哈。
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
