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選擇器前面就可以產生效果,我到現在還是沒個頭緒。

comments powered by Disqus