前端學習筆記 day49 CSS選擇器補充
阿新 • • 發佈：2018-11-23
1.選擇器
其實就是找標籤，為這個標籤設定相應的樣式；
2. 偽選擇器
2.1 未被訪問的連結(a:link{}) VS 已被訪問的連結(a:visited{})
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <link rel="stylesheet" href="index.css"> <!--View Code樣式來自於index.css檔案--> </head> <body> <a href="http://www.baidu.com">百度一下</a> <!--該連結之前已經被訪問過--> <a href="http://www.souhu.com">搜狐</a> </body> </html>
a:link{ color:red; } /*未被訪問的連結顯示顏色是紅色的*/ a:visitedView Code{ color:blue; } /*已經被訪問過的連結顏色是藍色的*/
執行結果：
2.2 滑鼠放上去的動作(a:hover{}) VS 滑鼠點選動作顯示（a:active{}）
a:link{ color:red; } /*未被訪問的連結顯示顏色是紅色的*/ a:visited{ color:blue; } /*已經被訪問過的連結顏色是藍色的*/ a:hover{ color:pink; } /*hover是滑鼠移上去連結顯示的顏色View Code*/ a:active{ color:green; } /*active是點選該標籤的一瞬間 顯示的顏色*/
執行結果：
其實滑鼠放上去 hover不只是在a標籤中有，在所有標籤都可以設定滑鼠放上去時顯示的效果（下面舉了p標籤和input標籤）：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <link rel="stylesheet" href="index.css"> <!--樣式來自於index.css檔案--> </head> <body> <a href="http://www.baidu.com">百度一下</a> <!--該連結之前已經被訪問過--> <a href="http://www.souhu.com">搜狐</a> <p>我是一個p標籤</p> <p> <label for="n1">使用者名稱:</label> <!--這樣可以跟下面的input標籤關聯 點選文字使用者名稱也可以選中文字框--> <input id="n1" name="description" type="text"> </p> </body> </html>View Code
a:link{ color:red; } /*未被訪問的連結顯示顏色是紅色的*/ a:visited{ color:blue; } /*已經被訪問過的連結顏色是藍色的*/ a:hover{ color:pink; } /*hover是滑鼠移上去連結顯示的顏色*/ a:active{ color:green; } /*active是點選該標籤的一瞬間 顯示的顏色*/ p:hover{ color:aqua; } input:hover{ border:1px; background-color:orangered; }View Code
執行結果：
2.3 input輸入框獲取游標（焦點）時顯示的樣式（a:focus{}）
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <link rel="stylesheet" href="index.css"> <!--樣式來自於index.css檔案--> </head> <body> <a href="http://www.baidu.com">百度一下</a> <!--該連結之前已經被訪問過--> <a href="http://www.souhu.com">搜狐</a> <p> <input name="name" type="text"> </p> </body> </html>View Code
a:link{ color:red; } /*未被訪問的連結顯示顏色是紅色的*/ a:visited{ color:blue; } /*已經被訪問過的連結顏色是藍色的*/ a:hover{ color:pink; } /*hover是滑鼠移上去連結顯示的顏色*/ a:active{ color:green; } /*active是點選該標籤的一瞬間 顯示的顏色*/ input:focus{ border:1px; background-color:burlywood; } /*輸入框點選獲取游標時文字框顯示的樣式*/View Code
3. 偽元素選擇器
3.1 first-letter 一般用於某段文字第一個首字母大寫的操作：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <link rel="stylesheet" href="index.css"> <!--樣式來自於index.css檔案--> </head> <body> <p> 生活一定要有儀式感，當你下定決心想要做一件事並且真的做成功了，那你整個人的價值都感覺不一樣了，這對你以後的發展是有很大的幫助的 </p> </body> </html>View Code
a:link{ color:red; } /*未被訪問的連結顯示顏色是紅色的*/ a:visited{ color:blue; } /*已經被訪問過的連結顏色是藍色的*/ a:hover{ color:pink; } /*hover是滑鼠移上去連結顯示的顏色*/ a:active{ color:green; } /*active是點選該標籤的一瞬間 顯示的顏色*/ input:focus{ border:1px; background-color:burlywood; } /*輸入框點選獲取游標時文字框顯示的樣式*/ p:first-letter{ font-size:45px; color:olivedrab; } /*為一段文字第一個文字設定特殊的樣式 這裡就是大寫 然後顏色是青色*/View Code
執行結果：
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <link rel="stylesheet" href="index.css"> <!--樣式來自於index.css檔案--> </head> <body> <p> 生活一定要有儀式感，當你下定決心想要做一件事並且真的做成功了，那你整個人的價值都感覺不一樣了，這對你以後的發展是有很大的幫助的 </p> <p> 人一定是需要努力的，既然可以選擇努力，為什麼不盡全力去成為更優秀的自己呢 </p> </body> </html>View Code
a:link{ color:red; } /*未被訪問的連結顯示顏色是紅色的*/ a:visited{ color:blue; } /*已經被訪問過的連結顏色是藍色的*/ a:hover{ color:pink; } /*hover是滑鼠移上去連結顯示的顏色*/ a:active{ color:green; } /*active是點選該標籤的一瞬間 顯示的顏色*/ input:focus{ border:1px; background-color:burlywood; } /*輸入框點選獲取游標時文字框顯示的樣式*/ p:first-letter{ font-size:45px; color:olivedrab; } /*為一段文字第一個文字設定特殊的樣式 這裡就是大寫 然後顏色是青色*/ p:before{ content:"****"; color:burlywood; } /*被p標籤包裹的一段文字 設定在文字最前面插入content內容*/ p:after{ content:"[??]"; color:blue; } /*文字後面新增一個[??]*/View Code
執行結果：
