首页风格
门户
博客

CSS伪类(pseudo class)简明介绍之:before和:after

日期:2012-4-26  来源:GBin1.com

CSS伪类(pseudo class)简明介绍之:before和:after

在线演示  本地下载  在线调试

如果大家经常关注互联网新网站和应用的话,或者你喜欢收集不同的网站模板,你会发现越来越多的网站模板或者网站在使用CSS伪类 - pseudo class。

今天我们这里给大家简单介绍伪类中经常使用的俩个:before和:after。希望大家能够觉得有帮助!

如果你喜欢我们的文章,或者有任何问题,请给我们留言,谢谢!

什么是伪类(pseudo class)?

pseudo这个单词来源于希腊语的音译,意思是虚构的,假的,或者伪的意思。因此这里不难理解为什么我们称之为伪类。

和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。

因此大家需要注意一下几点:

  • 它们不是真正的元素,对于很多情况下,大家不用用它展示实际意义的内容,尽量用它显示修饰性内容或者设计性内容,例如,图标
  • 要知道有些相关的开发工具,例如著名的开发工具firebug根本就不显示任何的伪类生成内容,如果你使用的话,你知道后果的!你将陷入盲目的debug中。当然你使用Chrome可以看到样式,但是在DOM看不到元素。

什么时候使用伪类(pseudo class)?

如果你需要创建一些修饰类图标,或者设计UI的时候,使用伪类是相当方便的,大家可能还记得那篇分享一个纯CSS开发的气泡式提示框文章吧,一个非常准确的使用场景。

支持的浏览器

  • Chrome 2+
  • Firefox 3.5+ (FF3.0支持部分),
  • Safari 1.3+
  • Opera 9.2+
  • IE8+ 
  • 手机上的浏览器

基本使用方法

如果我们有一个链接元素,如下:

<a href="http://www.gbin1.com" id="gbin1">GBIN1</a>

如果我们定义了相关的CSS,如下:

#gbin1{
  font-size: 12px
  background: #202020
}

我们使用:before生成当前元素前面的伪元素样式和内容,这里我们需要使用content属性,注意我们可以使用文字类,或者图片,如下:

#gbin1:before{
content: url("images/gbin1icon.png");
}

我们使用:after生成此元素后面内容的样式和内容,如下:

#gbin1:after{
    content: attr(href);
}

上面例子可以看到,我们使用content生成伪对象内容,使用的是一个图片作为元素内容,如果你不使用content对象,伪类基本没有任何使用价值。

同时我们可以使用attr来引用元素的属性,例如这里我们可以读取id=gbin1的元素的href属性对应的值做为:after生成的伪元素内容。

如果你见到::before和::after的样式,也不用奇怪,唯一区别在于这是CSS3的伪类表示方法。

注意:上面代码中,我们在:before中生成一个图片内容: url("images/gbin1icon.png"); ,注意没有引号,否则内容将不是图片,而是"url("image..")"字符串儿。

缺省情况下, 伪类元素display缺省属性是inline,你可以通过设置display: block来修改显示方式。以下代码将生成一个区域的伪类元素:

#gbin1:before{
content: "";
display: block;
width: 200px;
height: 200px;
}

注意:你不能删除content属性,否则这个伪类生成的元素将不存在。

这里我们使用伪类来生成带有图表的链接按钮,代码如下:

#gbin1:before{
content: "";
padding: 10px 15px;
margin: 10px 15px;
background: url("images/gbin1icon.png") no-repeat scroll 0% 50% transparent;
}


#gbin1:after{
content: attr(href);
padding: 20px;
margin: 20px;
}

生成内容如下图:

CSS伪类(pseudo class)简明介绍之:before和:after

各部分代码生成的元素内容如下图:

CSS伪类(pseudo class)简明介绍之:before和:after

以上介绍我们基本简单的介绍了伪类在CSS中的使用,希望对于没有接触过伪类的朋友有帮助,谢谢!

来源:CSS伪类(pseudo class)简明介绍之:before和:after

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐