CSS_03_04_CSS伪元素选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS_03_04_CSS伪元素选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第01步：編寫css代碼：wei.css
@charset "utf-8"; /* 偽元素選擇器:狀態 效果順序：L V H A */a:link.lin_01{/*超鏈接，未訪問狀態*/background-color:#60F;color:#FFF;text-decoration:none;/*去掉下劃線*/font-size:24px;}a:hover.lin_02{/*懸停效果*/background-color:#F00;color:#00F;font-size:36px;}a:active.lin_03{/*點擊，未放開效果*/background-color:#000;color:#FFF;font-size:9px;}a:visited.lin_04{/*訪問后效果*/background-color:#9F0;color:#930;font-size:9px;text-decoration:line-through;}div:hover.dh_01{/*div效果*/background-color:#9F0;color:#6FC;}p:first-letter{/*首字樣式*/background-color:#60F;color:#FF0;font-size:36px;}p:first-line{/*段落第一行*/font-size:24px;}input:focus{/*input輸入框效果*/background-color:#33C;color:#F00;}?
第02步：編寫html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>偽元素選擇器</title> <link href="wei.css" rel="stylesheet" type="text/css" /> </head><body><a href="http://www.baidu.com" target="_blank">無樣式效果鏈接</a><hr />效果01：<a href="http://www.baidu.com" class="lin_01" target="_blank">樣式效果01</a><hr />效果02：<a href="http://www.baidu.com" class="lin_02" target="_blank">樣式效果02</a><hr />效果03：<a href="http://www.baidu.com" class="lin_03" target="_blank">樣式效果03</a><hr />效果04：<a href="http://www.baidu.com" class="lin_04" target="_blank">樣式效04</a><hr />效果05：<br /><div class="dh_01">樣式05</div><div class="dh_01">樣式05</div><div class="dh_01">樣式05</div><hr />效果06：<br /><p>小船襪兒</p><p>小船襪兒</p><hr />效果07：<br /><input /><input /> </body> </html>?
轉載于:https://www.cnblogs.com/zjsy/p/4375739.html
總結
以上是生活随笔為你收集整理的CSS_03_04_CSS伪元素选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 百家姓中有没有姓凯和姓琵和姓赞和姓妮的有
- 下一篇： CSS扩展“less和”sass“