8-9偽類選擇符(a然后冒號) · 初識HTML+CSS

更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色： ~~~ a:hover{color:red;} ~~~ 上面一行代碼就是為 a 標簽鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入**鼠標滑過**字體顏色變為紅色特效。 **關于偽選擇符：** ??? 關于偽類選擇符，到目前為止，可以兼容所有瀏覽器的“偽類選擇符”就是 a 標簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。 ### 任務 **我也來試試，為右邊代碼編輯器中第一段文字“膽小如鼠”加入鼠標滑過文字字號設置為20px。** ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>偽類選擇符</title> <style type="text/css"> a:hover{ color:red; font-size:20px; } </style> </head> <body> <h1>勇氣</h1> <p class="first">三年級時，我還是一個<a href="http://www.imooc.com">膽小如鼠</a>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span>簡單</span>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html> ```