html:(29):伪选择符和分组选择符
生活随笔
收集整理的這篇文章主要介紹了
html:(29):伪选择符和分组选择符
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
偽類選擇符
更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態(tài)）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設置字體顏色：
a:hover{color:red;}上面一行代碼就是為 a 標簽鼠標滑過的狀態(tài)設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變?yōu)榧t色特效。
關于偽選擇符：
??? 關于偽類選擇符，到目前為止，可以兼容所有瀏覽器的“偽類選擇符”就是 a 標簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。
<!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="https://blog.csdn.net/weixin_43392489">膽小如鼠</a>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p><p id="second">到了三年級下學期時，我們班上了一節(jié)公開課，老師提出了一個很<span>簡單</span>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html>運行結果
分組選擇符
當你想為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標簽同時設置字體顏色為紅色：
h1,span{color:red;}它相當于下面兩行代碼：
h1{color:red;} span{color:red;} <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>分組選擇符</title> <style type="text/css"> h1,span{color:green;} .first,#second span{color:green;} </style> </head> <body><h1>勇氣</h1><p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p><p id="second">到了三年級下學期時，我們班上了一節(jié)公開課，老師提出了一個很<span>簡單</span>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環(huán)顧了四周，就我沒有舉手。</p><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html>運行結果
總結
以上是生活随笔為你收集整理的html:(29):伪选择符和分组选择符的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机基础 课程简介,课程简介及计算机基
- 下一篇： 燕山大学计算机专业研究生怎么样,求助大家