CSS基礎學習十一：選擇器的優先順序
在CSS基礎學習的篇章中，從第四篇部落格開始說選擇器，到昨天基本已經說完了。今天我們總結一下，選擇器作
用：告知瀏覽器需要設定哪個dom元素的樣式。最後來說說選擇器一個重要的問題，選擇器的優先順序。判斷優先順序的
方法就是嘗試！！！
一簡單選擇器的優先順序
簡單的選擇器包括我們在第四篇，第五篇，第六篇部落格的元素選擇器(標籤選擇器)，類選擇器和id選擇器。
我們來試驗：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS選擇器優先順序</title>
<style type="text/css">
/*標籤選擇器的渲染紅色*/
div{
background-color:#FF0000;
width:900px;
height:400px;
}
/*類選擇器的渲染藍色*/
.test{
background-color:#0000FF;
width:900px;
height:300px;
}
/*id選擇器的渲染紫色*/
#test{
background-color:#FF00FF;
width:900px;
height:200px;
}
</style>
</head>
<body>
<div id="test" class="test"></div>
</body>
</html>
註釋掉id選擇器後的結果為：類選擇器的優先順序居其次。
因此這三個簡單選擇器的優先順序順序為：HTML標籤屬性>id選擇器>類選擇器>元素選擇器
二同類型選擇器的優先順序
同類型：指的是相同型別的選擇器，理論上優先順序是一樣的。比如：div和p。.btn和.button。#header和
#footer，它們的優先順序是相同的。但是當同類型的選擇器作用到相同的HTML標籤上的時候優先順序就不一樣了。
我們繼續試驗：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS選擇器優先順序</title>
<style type="text/css">
/*test類選擇器的渲染淺綠色*/
.test{
background-color:#00FF00;
width:900px;
height:200px;
}
/*test1類選擇器的渲染淺藍色*/
.test1{
background-color:#00FFFF;
width:900px;
height:200px;
}
</style>
</head>
<body>
<div class="test test1"></div>
</body>
</html> 
我們嘗試的結果為：CSS規則寫在最後面的生效！！
如果這還不能信服我們再來嘗試<div class="test1 test"></div>有什麼不一樣的效果？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS選擇器優先順序</title>
<style type="text/css">
/*test類選擇器的渲染淺綠色*/
.test{
background-color:#00FF00;
width:900px;
height:200px;
}
/*test1類選擇器的渲染淺藍色*/
.test1{
background-color:#00FFFF;
width:900px;
height:200px;
}
</style>
</head>
<body>
<div class="test test1"></div>
<hr/>
<div class="test1 test"></div>
</body>
</html>
最終我們得出的結論依然是：同類型的選擇器，CSS規則寫在最後面的生效！
三選擇器的優先順序
CSS選擇器組合出很多複雜的選擇器規則，那麼我們就不能像簡單的選擇器那樣一個一個嘗試。下面我們介紹一
個很實用的判斷優先順序的方法。
判斷優先順序：我們約定 id選擇器的權重為100，類選擇器權重為10，標籤選擇器權重為1。一個複雜的選擇器的權
重等於所有選擇器的權重之和。一般，選擇器越特殊，優先順序(權重)越高。
我們先來看兩個複雜的選擇器規則：
第一個選擇器的權重為：1+10+10+1=22
div.test .item span{
background-color:#00FF00;
}
第二個選擇器的權重為：100+1+1=102
#test div span{
background-color:#FF0000;
}
從我們約定的規則來看，顯然是第二個生效！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS選擇器優先順序</title>
<style type="text/css">
/*第一個選擇器渲染的是綠色*/
div.test .item span{
background-color:#00FF00;
}
/*第一個選擇器渲染的是紅色*/
#test div span{
background-color:#FF0000;
}
</style>
</head>
<body>
<div id="test" class="test">
<div class="item">
<span>12345</span>
</div>
</div>
</body>
</html>
那麼我們可能會有一個疑問：同樣的權重，那個選擇器起作用呢？從一系列的理論和試驗我們可以得出這與同類
型選擇器的優先順序問題相似，我們還是能輕易的得出結論：同樣的權重要選擇順序最後的生效。
四!important
樣式最高優先順序：無視優先順序，在樣式的一條宣告的最後分號前加上，使該樣式起作用。
我們還是來嘗試：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS選擇器優先順序</title>
<style type="text/css">
/*元素選擇器渲染的是藍色*/
div{
color:#0000FF;
}
/*類選擇器渲染的是紅色*/
.test{
color:#FF0000;
}
</style>
</head>
<body>
<div class="test">攻城課堂</div>
</body>
</html>/*元素選擇器渲染的是紅色*/
div{
color:#0000FF!important;
}
關於選擇器的優先順序我也就瞭解了這些，CSS選擇器就告一段落了！！