css之:after ::after(转)

目录
[隐藏]

css之:after ::after

:after 的用法

CSS :after 伪元素(pseudo-element)(后面有解释
定义

:after 伪元素在元素内容之后插入内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。
例子:

此样式会在每个 h1 元素之后播放一段声音:

h1:after{    content:url(beep.wav);}

这里有w3schools的例子
还有一个:after差不多的:before,就是在元素内容之前插入内容,内容当然就是content指出的内容如:文字,图片quirksmode提供的例子
浏览器IE6,7不支持:after伪类,详细的兼容性列表这里

:after 和::after的区别

element:after  { style properties }  /* CSS2 syntax */
element::after { style properties }  /* CSS3 syntax, not supported by IE8 */

:after | ::after

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

一个冒号专门用来表示伪类,而伪元素用两个冒号来表示,以示区别,也就是一个是伪类,一个是伪元素。ie8仅支持:after。

Browser Lowest Version Support of
Internet Explorer 8.0 :after
Firefox (Gecko) 1.0 (1.0) :after
1.0 (1.5) :after | ::after
Opera 4.0 :after
7.0 :after | ::after
Safari (WebKit) 1.0 (85) :after | ::after

什么是伪类和伪元素

伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。
伪类和伪元素都不出现在源文件和文档树中。伪元素在firebug下是查看不到的。
常见的伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang
伪元素有::first-line,:first-letter,:before,:after

本文链接:css之:after ::after(转)

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:Rexdf,谢谢!^^


此条目发表在网站建设分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:zsmilebig: :zsadbig: :zwiredbig: :zgreenhappy: more »

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据