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

鳄鱼君

发表文章数:525

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » 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应用相同的样式,使为访问和访问后的链接样式保持一致。

1.同时使用链接的4种伪类时,通常按照a:link、a:visited、a:hover和a:active的顺序书写,否则定义的样式不起作用。
2.除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS3新增的伪元素选择器、链接伪类》 发布于2020-04-27

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

8 + 9 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册