Author: 阿財

裡面的字會變成什麼顏色？

<style>
#box1 {
color:black;
color: red;
}
.box {color: blue}
div {color: yellow}
</style>
...
<div id="box1" class="box">內容</div>


答案是紅色。為什麼呢？因為CSS會依下列權重選擇要套用的樣式：

1. ID會優先選用 (例如這邊的#box1)
2. class其次 (假設刪掉範例中的#box1, 顏色會變成.box定義的blue)
3. 如果權重相似的，會以後面的為主(所以會採用#box1裡後面定義的red)

除了上面三個，最後還有一張王牌 – !important，但是因為會造成日後debug的困難，所以不建議使用。用法如下：

.box {color: blue!important;}


2. 各版本IE專用的特定符號

一開始是IE設計上的小問題，日後衍生成網頁開發者不可或缺的工具 – IE hack!在CSS的定義裡面，加上特殊符號之後，這些設定值就會變成IE專用的！舉個例子：

.box {
color: red;
_color: blue;
}

如果用了上面這個定義，在IE 6下面，字體會變成藍色，而其他所有瀏覽器會顯示為紅色。因為字元前面加個下引線”_”，IE6會裝做沒看見這個特殊字元，繼續讀該行後面的內容(color: blue); 而其他所有瀏覽器遇到這個特殊符號則會直接忽略整行。

這邊以color: blue做範例，各版IE會吃下列的特殊符號：

IE6, 7, 8 – 分號之前加上\9: color: blue\9;
IE6, 7 – 每行開頭加上星號*: *color: blue;
IE6 – 每行開頭加下引線_: _color: blue;

值得注意的是裡面幾個特殊符號是可以同時套用到不同版本的IE上的，這時候，前面提到的權重就派上用場啦！如果要把一個網頁元件做出給各版IE的樣式，那就是這樣：

.box {
color: red; /* 標準的設定 */
color: blue\9; /* IE6,7,8適用 */
*color: yellow; /* IE6,7適用，因此在IE6與7上面，這個設定會蓋掉上面的 */
_color: black; /* IE6適用 */
}


3. 推薦作法

有了IE 破解大法之後，雖然會費點功夫，但是做起網頁就不擔心各瀏覽器顯示出來的東西差太多的問題啦！這裡以阿財的經驗，推薦大家開發網頁的幾個守則：

1. 先以Firefox, Chrome或Safari為基準做開發
2. 依序在IE8、7與6版上做測試，視情況加上IE hack
3. 避免在HTML裡面使用 <!--[if IE]><![endif]--> 這樣的解決方式，一來因為醜，二來會變慢，三來也不好維護。（貝哥哥網站也用了這個禁忌，但一直沒空修理）