Html學習之十（CSS選擇器的使用--偽類選擇器）
阿新 • • 發佈：2019-03-31
style 一個 選擇器 c++ 目前 情況 family active 簡介
偽類選擇器
一、基於a標簽。
1、:hover 選擇鼠標滑過的超鏈接元素
2、:active 選擇鼠標單擊中的超鏈接元素
3、:link 選擇未被訪問的超鏈接元素
4、:visited 選擇已經被訪問過的超鏈接元素
二、基於input標簽。
1、:focus 表示某個input元素被選中的情況。
2、:enable 啟用input元素
3、:disable 禁用input元素
三、:before和:after偽類選擇器
1.:before 在一個元素之前添加一個元素
2.:after 在一個元素之後添加一個元素
<!doctype html> <html> <head> <meta charset="utf-8"> <title>鏈接偽類</title> <style type="text/css"> a:link,a:visited{ /*未訪問和訪問後*/ color:pink; text-decoration:none; /*清除超鏈接默認的下劃線*/} a:hover{ /*鼠標懸停*/ color:blue; text-decoration:underline; /*鼠標懸停時出現下劃線*/ } a:active{ color:#F00;} /*鼠標點擊不動*/ </style> </head> <body> <a href="#">公司首頁</a> <a href="#">公司簡介</a> <a href="#">產品介紹</a> <a href="#">聯系我們</a> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>before選擇器的使用</title> <style type="text/css"> p:before{ content:"傳智播客"; color:#c06; font-size: 20px; font-family: "微軟雅黑"; font-weight: bold; } </style> </head> <body> <p>專註於Java、.Net、PHP、網頁設計和平面設計、IOS、C++工程師的培養，提供的免費視頻教程是目前 覆蓋面最廣，項目最真實的視頻教程之一。</p> </body> </html>
結果：
Html學習之十（CSS選擇器的使用--偽類選擇器）