伪类选择器可分为三类
1)).锚伪类,用于检测鼠标的悬停状态。
<Html> <head> <title>Css应用</title> <style type="text/Css"> a:link{ /* 未访问的链接 */ background: red } a:visited{ /* 已访问的链接 */ background: green } a:hover{ /* 鼠标移动到链接上 */ background: blue } a:active{ /* 选定的链接 */ background: yellow } </style> </head> <body> <a href="https://www.baidu.com">百度</a> </body> </Html>
注:a:hover必须置于a:link和a:visited 之后,才是有效的。a:active必须被置于a:hover 之后,才是有效的。
2)). :first-child伪类
匹配第一个匹配到的标签
<Html> <head> <title>Css应用</title> <style type="text/Css"> p:first-child{ 匹配第一个p标签 background: red } div:first-child{ 匹配第一个div标签 background: blue }</style> </head> <body> <div id='dv'> <p class='fd'>fdaf <div id='gfd'>grerg</div> </p> <div class='gf'>fsdjkfhkj <a href="https://www.baidu.com">baidu</a> </div> </div> </body> </Html>
3)). :lang伪类
<Html> <head> <title>Css应用</title> <style type="text/Css"> q:lang(hw) 短引用利用伪类 { quotes: "^" "^" } </style> </head> <body> <div id='dv'> <p>hw<q lang="hw">任性的90后boy</q></p> 必须要用短引用 </div> </body> </Html> <Html> <head>
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r59017.shtml