伪类选择器

2024-01-17 09:58 小编

伪类选择器可分为三类

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>fdaf <div id='gfd'>grerg</div> </p> <div>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>任性的90后boy</q></p> 必须要用短引用 </div> </body> </Html> <Html> <head>

Tag：选择

返回首页上一篇：CSS 指层叠样式表下一篇：选择器