CSS控制樣式的三種方式優先級對比驗證

本文轉載自查看原文 2013-07-21 17:01 2583 WEB前端/ 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>首先，我們先直接使用外部樣式表來定義div標簽的樣式：

xiaoxuetu.css

1 div {
2     color:blue
3 }

View Code

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7 
 8         <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
 9     </head>
10     
11     <body>
12         <div>外部樣式表</div>
13     </body>
14 </html>

View Code

顯示效果：

下面我們開始驗證吧。

2>外部樣式表 VS 內部樣式表（先定義內部樣式表，再引入外部樣式表定義文件） 加入內部樣式表，也就是說，直接在<head>標簽中定義樣式規則，這個時候我們修改一下xiaoxuetu.html中的代碼：

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <style type="text/css" media="screen">
 8             div {
 9                 color: green
10             }
11         </style>
12         <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
13     </head>
14     
15     <body>
16         <div>外部樣式表(藍色) VS 內部樣式表(綠色)</div>
17     </body>
18 </html>

View Code

顯示效果：

得出優先級結果：外部樣式表 > 內部樣式表

3>外部樣式表 VS 內部樣式表（先引入外部樣式表定義文件，再定義內部樣式表）這步很簡單，其實就是直接將link標簽剪切移動到上面到head標簽中定義內部樣式表的前面：

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
 8         <style type="text/css" media="screen">
 9             div {
10                 color: green;
11             }
12         </style>
13         
14     </head>
15     
16     <body>
17         <div>外部樣式表(藍色) VS 內部樣式表(綠色)</div>
18     </body>
19 </html>

View Code

顯示效果：

得出優先級結果：內部樣式表 > 外部樣式表

從<2>和<3>這兩部測試我們可以知道，在直接對標簽的樣式進行定義時，外部樣式表和內部樣式表的優先與他們的引入順序有關,嘿嘿，是不是很慶幸沒有完全相信官網所說的咧……

4>外部樣式表 VS 內聯樣式 直接在div標簽中定義樣式，這個時候我們修改下xiaoxuetu.html的代碼：

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
 8     </head>
 9     
10     <body>
11         <div style="color:red;">外部樣式表(藍色) VS 內聯樣式(紅色)</div>
12     </body>
13 </html>

View Code

顯示效果：

得出優先級結果：內聯樣式 > 外部樣式表

5>內聯樣式 VS 內部樣式表，這個時候我們修改下xiaoxuetu.html代碼：

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4     <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <style type="text/css" media="screen">
 8             div {
 9                 color: green
10             }
11         </style>
12     </head>
13     
14     <body>
15         <div style="color:red;">內部樣式表(綠色) VS 內聯樣式(紅色)</div>
16     </body>
17 </html>

View Code

顯示效果：

得出優先級結果：內聯樣式 > 內部樣式表

從上面步驟<2>到<5>的對比中我們可以知道:內聯樣式的優先級是最大的，而內部樣式表和外部樣式表的優先級得看他們的引入和定義順序，如果先用內部樣式表定義了樣式，然后再引入通過外部樣式表定義的樣式，你們外部樣式表的樣式將會覆蓋內部樣式表定義的樣式，反之亦是一樣。

當然，這個情況只是用id或者class選擇的時候，也是一樣的。如果對一個標簽的樣式定義既有class也有id選擇器的時候，同時又包含了三種樣式定義方式的，就得先看完下面的優先級測試了。

三、判斷用id、class以及標簽選擇器定義樣式的優先級

本次測試中，為了減少其他因素的影響，只采用內部樣式表來定義樣式，同時分別使用了ID選擇器和Class選擇器來選擇使用樣式的標簽。

1>三種方式並存的時候

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4   <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <style type="text/css" media="screen">
 8             fieldset {
 9                 width: 50%
10             }
11             
12             div {
13                 color: red;
14             }
15             
16             #idtest {
17                 color: green;
18             }
19             
20             .classtest {
21                 color: blue;
22             }
23         </style>
24     </head>
25     
26     <body>
27         <fieldset>
28             <legend>單一顯示效果</legend>
29             <div id="idtest">只使用ID(綠色)</div>
30             <div class="classtest">只使用Class(藍色)</div>
31         </fieldset>
32         <p>&nbsp;</p>
33         <fieldset>
34             <legend>先引入ID定義的樣式再引入Class定義的樣式</legend>
35             <div id="idtest" class="classtest">小學徒</div>
36         </fieldset>
37         <p>&nbsp;</p>
38         <fieldset>
39             <legend>先引入Class定義的樣式再引入ID定義的樣式</legend>
40             <div id="idtest" class="classtest">小學徒</div>
41         </fieldset>
42     </body>
43 </html>

View Code

顯示效果：

得出優先級結果 id選擇器 > class選擇器 > 標簽選擇器

2>當只有兩個class或者兩個id的時候

xiaoxuetu.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4   <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <style type="text/css" media="screen">
 8             #idtest {
 9                 color: green;
10             }
11             
12             #idtest2 {
13                 color: YellowGreen;
14             }
15             
16             .classtest {
17                 color: blue;
18             }
19             
20             .classtest2 {
21                 color: yellow;
22             }
23         </style>
24     </head>
25     
26     <body>
27         <fieldset>
28             <legend>兩個class的時候</legend>
29             <div class="classtest2" class="classtest">classtest2(黃色)先classtest(藍色)后</div>
30             <div class="classtest" class="classtest2">classtest(藍色)先classtest2(黃色)后</div>
31         </fieldset>
32         <p>&nbsp;</p>
33         
34         <fieldset>
35             <legend>兩個id的時候</legend>
36             <div id="idtest" id="idtest2">idtest(綠色)先idtest2(黃綠色)后</div>
37             <div id="idtest2" id="idtest">idtest2(黃綠色)先idtes(綠色)t后</div>
38         </fieldset>
39     </body>
40 </html>

View Code

顯示效果：(由於擔心黃色看不清，在那里做了一個簡單說明)

得出優先級結果：當且僅當有兩個或者是多個class或者id的時候，誰在前面就誰的優先級高。

3>只有標簽div選擇器的時候

xiaoxuetu.html(藍色樣式先，紅色樣式后)

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4   <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <style type="text/css" media="screen">
 8             
 9             div {
10                 color: blue;
11             }
12             
13             div {
14                 color: red;
15             }
16             
17             
18         </style>
19     </head>
20     
21     <body>
22         <div>藍色樣式先，紅色樣式后</div>
23     </body>
24 </html>

View Code

顯示效果：

xiaoxuetu2.html(紅色樣式先，藍色樣式后)

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4   <head>
 5         <title>CSS樣式表優先級測試</title>
 6         <meta charset="UTF-8" />
 7         <style type="text/css" media="screen">
 8             div {
 9                 color: red;
10             }
11             div {
12                 color: blue;
13             }
14             
15         </style>
16     </head>
17     
18     <body>
19         <div>紅色樣式先，藍色樣式后</div>
20     </body>
21 </html>

View Code

顯示效果：

從兩個結果我們可以知道，當只有標簽選擇器的時候，后面定義的樣式表的優先級就越高。

四、總結

1.當只使用id選擇器、class選擇器或者標簽選擇器的時候，不管是使用多少種樣式表定義方式，都是內嵌樣式的優先級最高，接下來外部樣式表和內部樣式表的就得看他們的引入順序了;

2.當只使用id選擇器或者class選擇器的時候，同一個標簽內不管使用了多少個，都是排在前面的優先級更高;

3.當只使用標簽選擇器的時候，如果定義了多個一樣的，你們寫在最后面的標簽選擇器生效，也就是它的優先級最高;

4.當同一個標簽中既有id選擇器，又有class選擇器，同時又有標簽選擇器的時候，優先級的次序是id選擇器 > class選擇器 > 標簽選擇器;

5.當每一種都有的時候，那就根據具體情況具體分析吧，嘿嘿，哈哈……

恩，這篇文章我很用心寫的哦，如果大家覺得好，麻煩點擊一下贊吧，又或者你有什么疑問或者不一樣的意見，歡迎留言討論哦，因為白天要上班，所以我會在晚上有空的時候及時處理的，還請見諒哈。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css的三種引入方式、各種選擇器的介紹、分組與嵌套、選擇器的優先級 css層疊樣式優先級總結 CSS樣式的優先級和覆蓋原則 CSS的引入方式和優先級 CSS優先級 css !important用法CSS樣式使用優先級判斷關於CSS的優先級,CSS優先級計算 CSS的優先級理解 css樣式的三種引用方式 3.CSS樣式的三種使用方式