5 CSS伪类选择器

  • 5 CSS伪类选择器已关闭评论
  • 72 次浏览
  • A+
所属分类:Web前端
摘要

anchor伪类:专用于控制链接的显示效果before after伪类
before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。


5 伪类选择器

anchor伪类:专用于控制链接的显示效果

More Actions:link a:link 选择所有未被访问的链接。
:visited a:visited 选择所有已被访问的链接。
:active a:active 选择活动链接。
:hover a:hover 选择鼠标指针位于其上的链接。
<style>            a:link{                color: red;            }            a:visited{                color: coral;            }            a:hover{                color: blue;            }            a:active{                color: rebeccapurple;            }      </style> 

before after伪类
before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。

More Actions:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。

:last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。

:before p:before 在每个

元素的内容之前插入内容。

:after p:after 在每个

元素的内容之后插入内容。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>css伪类选择器</title>      <style>         /*a:link{*/         /*    color: red;     !* 鼠标点击字体变成红色 *!*/         /*}*/         /*a:visited{*/         /*    color: coral;   !* 设定字体为橙色 *!*/         /*}*/         /*a:hover{*/         /*    color: blue;    !* 鼠标滑过字体变成蓝色 *!*/         /*}*/         /*a:active{*/         /*    color: rebeccapurple;*/         /*}*/          .c1 p:first-child{             color: red;         }          p#i1:after{             content: "这是一个伪类构造的块级标签";             display: block;             color: gold;         }     </style>  </head> <body> <a href="https://www.baidu.com">hello world! </a>  <div class="c1">     <p>item1</p>     <p>item2</p>     <div>item3</div>     <p>item4</p> </div>  <div id="i1">     DIV标签     <!--    <div style="color: red">这是一个伪类构造的块级标签</div>--> </div>  <p>两只黄鹂鸣翠柳</p>  </body> </html>