即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

【CSS进阶】伪元素的妙用–单标签之美

精华博文 ChokCoco 20℃ 0评论
本文目录
[隐藏]

最近在研读 《CSS SECRET》(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目:

CSS3奇思妙想 — Demo (请用 Chrome 浏览器打开,非常值得一看)。采用单标签完成各种图案,许多图案与本文有关。

也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想

 

正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用。

1.   :before和::before的区别

在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。

CSS2及CSS3伪类区分CSS3伪元素单双冒号区分

有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持这两种表示方式。

1
2
3
4
5
6
#id:after{
 ...
}
#id::after{
 ...
}
单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。

所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。

更加具体的信息,可以看看 MDN 对伪类伪元素的理解。

本文的主角就是伪元素 before 和 after ,下面将具体讲讲这两个伪元素的魅力。
 

2.   哪些标签不支持伪元素?(补充于2016.06.28)

我也是才知道这个姿势。为了不误导读者,就赶紧补充一下。

伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的。

诸如