id選擇器的問題 : O3noBLOG

05月 31日

id選擇器的問題

之前看過兩三篇關於如何寫更有效率的CSS的文章（例如：CSS tips and tricks part 1），講到id選擇器的時候，都提到他前面可以不用加標籤名稱，因為id在一份HTML文件中應該是唯一的，不過我在實際使用時卻遇到一些怪現象，而且IE和Firefox都有這問題，基本上我也不確定這是不是不對的。

首先來看我們的測試網頁一，在這個網頁可以看到兩個方塊，一個是綠色的，另一個是紅色的。其中綠色的那個方塊他的id是l1，紅色那塊則是l2，這網頁的完整CSS code如下：

div {
	background-color: white;
}

#l1 {
	width: 200px;
	height: 200px;
	background-color: green;
}

#l2 {
	width: 100px;
	height: 100px;
	background-color: red;
}

看起來一切OK，我先讓所有的div標籤的預設背景色是白色，然後再用id選擇器對兩個物件指定顏色。接著問題來了，來看測試網頁二。在這個例子中，id="l2"的方塊變成白色了，事實上CSS code只有改了一行如下：

#l1 div {
	background-color: white;
}

這行的意思是說在id="l1"之下的div標籤底色都是白的。照理說這樣的設定應該不會影響到顯示結果，因為id="l2"的設定在他的後面，後宣告的會覆蓋先宣告的，而且同為id選擇器，優先度應該一樣，但是結果卻是#l1 div勝過#l2。所以我試出了兩個可以處理這問題的寫法，分別是方法一和方法二，方法一修改的部分如下：

div#l2 {
	width: 100px;
	height: 100px;
	background-color: red;
}

方法二修改的部分如下：

#l1 #l2 {
	width: 100px;
	height: 100px;
	background-color: red;
}

其中方法二我覺得還蠻容易理解的，感覺上就是做一個優先度更高的選擇器（前後都是id選擇器）來覆蓋屬性值，方法一就讓我很困惑了，為什麼我把標籤名稱放到id選擇器前面就可以產生效果，我到現在還是沒個頭緒。

單篇彙整