日期:2012-4-26 来源:GBin1.com
如果大家经常关注互联网新网站和应用的话,或者你喜欢收集不同的网站模板,你会发现越来越多的网站模板或者网站在使用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+
- 手机上的浏览器
基本使用方法
如果我们有一个链接元素,如下:
GBIN1
如果我们定义了相关的CSS,如下:
#gbin1{
font-size: 12px
background: #202020
}
我们使用:before生成当前元素前面的伪元素样式和内容,这里我们需要使用content属性,注意我们可以使用文字类,或者图片,如下:
....
来源:CSS伪类(pseudo class)简明介绍之:before和:after
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/8288/viewspace-722600/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/8288/viewspace-722600/