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.除了文本样式之外,链接伪类还常常用于控制超链接的背景、边框等样式
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!