小君大帅比前端开发 2020-04-27

CSS3新增的伪元素选择器、链接伪类

CSS3新增的伪元素选择器

伪元素选择器，是这对CSS中已定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器。

:before伪元素

:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来定义要制定插入的具体内容。其语法格式为：

<元素>:before{
    content:文字/url();
    }

被选元素位于:before之间，{ }中的content属性用来制动要插入的具体内容，该内容既可以为文本也可以为图片。我们来通过一个案例来深刻了解如何使用：

 <style type="text/css">
      p:before{
        content: "鳄鱼君Ba";   /*前缀添加内容*/
       color: #c06;
       font-size: 30px;
       font-family: "微软雅黑";
       font-weight: bold;
      }
      :empty{background-color: #999;}
    </style>

<p>一个爱笑的人，爱世界，爱生活，爱每一个人</p>

:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。跟前一个案例相同，我们只需要做一些修改：

<style type="text/css">
      p:before{
        content: "鳄鱼君Ba";   /*前缀添加内容*/
       color: #c06;
       font-size: 30px;
       font-family: "微软雅黑";
       font-weight: bold;
      }
       p:after{
        content: "骗人的";   /*前缀添加内容*/
       color: #c06;
       font-size: 30px;
       font-family: "微软雅黑";
       font-weight: bold;
      }
    </style>

<p>一个爱笑的人，爱世界，爱生活，爱每一个人</p>

CSS3新增的链接伪类

链接伪类可以实现不同的链接状态。伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名，类名或id名加“:”构成。详细内容参考：CSS定义链接样式。在实际工作中只需要使用a:link，a:visited和a:hover定义为访问、访问后和鼠标悬停时的链接状态，并且常常对a:link和a:visited应用相同的样式，使为访问和访问后的链接样式保持一致。