作者：阿一 時間： 2008-08-12 文檔類型：轉載 來自：
第 1 頁 更豐富的CSS選擇符 [1] 第 2 頁 更豐富的CSS選擇符 [2] 第 3 頁 更豐富的CSS選擇符 [3] 第 4 頁 更豐富的CSS選擇符 [4] 第 5 頁 更豐富的CSS選擇符 [5] 第 6 頁 更豐富的CSS選擇符 [6]
偽類選擇符和偽對象選擇符
這又是令人頭疼的“名詞”，到底什么是“偽類”、“偽對象”呢？到底“偽”在哪里呢？我們依然從一個大家都用過，很熟悉的示例說起：
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="簡單的XHTML頁面" /> <meta name="Description" content="這是一個簡單的XHTML頁面" /> <title>簡單的XHTML頁面</title><style type="text/css"> a:link,a:visited,a:active{ color:red; } a:hover{ color:blue; }</style></head><body> <a href="#" title="測試">鼠標附上去字會變成藍色</a> </body> </html> 很簡單且常見的情況，給超鏈接設置“鼠標移上不同字體顏色發(fā)生變化”的樣式。這里的“:link”、“:visited”、“:active”和“:hover”就是“偽類”。之所以說是“偽”，是因為，這些東西一定要依附在某種標簽上（示例中是<a>標簽），它們并不能單獨的存在，當它們單獨存在的時候將沒有任何意義。 在IE6中，只支持超鏈接<a>標簽的偽類，而在IE7中，則支持幾乎所有“可見標簽元素”的偽類。也就是說，就算是一個div，你也可以設置div:hover的樣式�？梢灶A測的未來是：一些簡單的樣式方面的變化，將不再需要js去控制，用css就可以實現(xiàn)簡單的“動態(tài)”效果�？聪旅娴睦�，將更有助于你的理解。 <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="簡單的XHTML頁面" /> <meta name="Description" content="這是一個簡單的XHTML頁面" /> <title>簡單的XHTML頁面</title><style type="text/css">#txtName{ border:1px solid #eee; } #txtName:hover{ border:1px solid black; }</style></head><body> <input type="text" id="txtName" /></body> </html>上面的示例很簡單，也很常用：一個輸入名字的文本框，平時狀態(tài)下，是“灰色”邊框，而當用戶將鼠標以上去的時候，邊框“變成”黑色，從而達到提醒的目的。 下面是IE7和FireFox的顯示效果截圖。 圖：對<input>設置偽類樣式 出處： 責任編輯：bluehearts 上一頁 更豐富的CSS選擇符 [4] 下一頁 更豐富的CSS選擇符 [6] ◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="簡單的XHTML頁面" /> <meta name="Description" content="這是一個簡單的XHTML頁面" /> <title>簡單的XHTML頁面</title><style type="text/css"> a:link,a:visited,a:active{ color:red; } a:hover{ color:blue; }</style></head><body>
<a href="#" title="測試">鼠標附上去字會變成藍色</a>
</body>
</html>
很簡單且常見的情況，給超鏈接設置“鼠標移上不同字體顏色發(fā)生變化”的樣式。這里的“:link”、“:visited”、“:active”和“:hover”就是“偽類”。之所以說是“偽”，是因為，這些東西一定要依附在某種標簽上（示例中是<a>標簽），它們并不能單獨的存在，當它們單獨存在的時候將沒有任何意義。
在IE6中，只支持超鏈接<a>標簽的偽類，而在IE7中，則支持幾乎所有“可見標簽元素”的偽類。也就是說，就算是一個div，你也可以設置div:hover的樣式�？梢灶A測的未來是：一些簡單的樣式方面的變化，將不再需要js去控制，用css就可以實現(xiàn)簡單的“動態(tài)”效果�？聪旅娴睦�，將更有助于你的理解。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="簡單的XHTML頁面" /> <meta name="Description" content="這是一個簡單的XHTML頁面" /> <title>簡單的XHTML頁面</title><style type="text/css">#txtName{ border:1px solid #eee; } #txtName:hover{ border:1px solid black; }</style></head><body> <input type="text" id="txtName" /></body> </html>上面的示例很簡單，也很常用：一個輸入名字的文本框，平時狀態(tài)下，是“灰色”邊框，而當用戶將鼠標以上去的時候，邊框“變成”黑色，從而達到提醒的目的。 下面是IE7和FireFox的顯示效果截圖。 圖：對<input>設置偽類樣式 出處： 責任編輯：bluehearts 上一頁 更豐富的CSS選擇符 [4] 下一頁 更豐富的CSS選擇符 [6] ◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="簡單的XHTML頁面" /> <meta name="Description" content="這是一個簡單的XHTML頁面" /> <title>簡單的XHTML頁面</title><style type="text/css">#txtName{ border:1px solid #eee; }
#txtName:hover{ border:1px solid black; }</style></head><body>
<input type="text" id="txtName" /></body>
下面是IE7和FireFox的顯示效果截圖。
圖：對<input>設置偽類樣式
出處： 責任編輯：bluehearts
上一頁 更豐富的CSS選擇符 [4] 下一頁 更豐富的CSS選擇符 [6]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
藍色理想版權申明：除部分特別聲明不要轉載，或者授權我站獨家播發(fā)的文章外，大家可以自由轉載我站點的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權歸我站和作者共有。
轉載要求：轉載之圖片、文件，鏈接請不要盜鏈到本站，且不準打上各自站點的水印，亦不能抹去我站點水印。
特別注意：本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯(lián)系，版權歸原作者所有，文章若有侵犯作者版權，請與我們聯(lián)系，我們將立即刪除修改。
第 1 頁 
第 5 頁 更豐富的CSS選擇符 [5]
