CSS - 偽類
阿新 • • 發佈：2018-11-11
目錄
1、超連結（a標籤）四大偽類
a:link {color: #FF0000} /* link 未訪問的連結 */ a:visited {color: #00FF00} /* visited 已訪問的連結 */ a:hover {color: #FF00FF} /* hover 滑鼠移動到連結上 */ a:active {color: #0000FF} /* active 選定的連結 */
在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，才是有效的。
在 CSS 定義中，a:active 必須被置於 a:hover 之後，才是有效的。
偽類名稱對大小寫不敏感。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style type="text/css"> a { color: #333; text-decoration: none; } /*:link為一個整體,代表超連結的初始狀態*/ a:link { color: orange; } /*:hover滑鼠懸浮*/ a:hover { color: green; /*滑鼠樣式*/ cursor: pointer; } /*:active活動狀態中(被滑鼠點選中)*/ a:active { color: red; } /*:visited訪問過的狀態*/ a:visited { color: cyan; } </style> </head> <body class="body"> <a href="./123.html">訪問頁面</a> <a href="https://www.baidu.com">訪問過頁面</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style type="text/css"> /*普通標籤運用: :hover :active*/ .box { width: 200px; height: 200px; background-color: red; } .box:hover { background-color: orange; cursor: pointer; } .box:active { width: 400px; border-radius: 50%; } </style> </head> <body class="body"> <div class="box">box</div> </body> </html>
2、內容偽類
:before：內容之前
:after：內容之後
:before, :after { content: "ctn"; }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style type="text/css"> /*內容偽類*/ .txt:before { content: "我是字首~~~" } .txt:after { content: ">>>我是字尾" } </style> </head> <body class="body"> <!-- 內容偽類 --> <div class="txt">原來的文字</div> </body> </html>
注意：/*偽類可以單獨出現*/
:after { content: "呵呵" }
3、索引偽類
:nth-child(n)：位置優先，再匹配型別
:nth-of-type(n)：型別優先，再匹配位置
注意：值可以為位置數，也可以為2n、3n...，代表2的倍數，3的倍數，且位置數從1開始
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style type="text/css"> /*位置偽類*/ /*1.位置從1開始*/ /*先匹配位置,再匹配型別: 找到所有結構下（頁面中）的第2個標籤,如果剛好是div,那麼匹配成功*/ /*body a-baidu div01*/ div:nth-child(2) { color: green; } /*先確定型別,再匹配位置*/ /*先將頁面中所有div找出,在匹配那些在自己結構層次下的第二個div*/ div:nth-of-type(2) { color: cyan; } /*2n ---- div:nth-of-type(2n)、div:nth-child(2n) */ /*第2、4、6、8……*/ /* div ooo div ooo div ooo div ooo div */ /*3n ---- div:nth-of-type(3n)、div:nth-child(3n) */ /*第3、6、9……*/ /* div div ooo div div ooo div div ooo */ /*3n - 1 ---- div:nth-of-type(3n-1)、div:nth-child(3n-1) */ /*第2、5、8……*/ /* div ooo div div ooo div div ooo div */ </style> </head> <body class="body"> <!-- 位置偽類 --> <div class="wrap"> <span>span01</span> <div>div01</div> <div>div02</div> </div> </body> </html>
4、取反偽類
:not(selector)：對selector進行取反
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>偽類選擇器</title> <style type="text/css"> /*取反偽類*/ /*若存在對同意元素的相同設定，則按照位置取值*/ /*:not([d]) { color: red; } body.body { color: orange; }*/ span:not([d]) { color: red; } </style> </head> <body class="body"> <!-- 取反偽類 --> <span d>12345</span> <span dd>67890</span> </body> </html>
