:before 和 :after 的内幕 以及伪类
2012-08-22 23:42
218 查看
:before
和 :after 的内幕
伪类
VS 伪元素
这两个概念很容易混淆,即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单,如下:
伪类:作用对象是整个元素
首先,来看几个伪类
?
伪元素:作用于元素的一部分
还是来看几个例子:
?
更加神奇的是可以作用于并未加入HTML的对象,这就是:before 和 :after,也就是本文要说的内容。
:before VS ::before
为什么有两种写法呢?它们的效果一样么?
答案是一样的,来看一个例子:
?
IE再次毁了一切
所有现代浏览器都支持 :: 语法,但是悲剧的IE8不支持,大多数开发者为了兼容IE,使用CSS2的 :。为了保持简单一致,本文后面的部分都是用CSS2格式。
什么是 :before 和 :after
:before 和 :after 使你可以通过CSS加入一些内容,从而避免了HTML的凌乱。特别是一些装饰性的元素,从语义化考虑本就不该出现在HTML中。
举个例子,你的网站有一些电话号码,你希望在它们前面加一个icon ☎。你可以用 :before 伪元素实现这个效果:
?
这段代码使得.phoneNumber的所有元素的前面插入了一个icon。:after 作用一样,你可以猜到会出现什么效果了
?
一个简洁的例子
最近,:before 和 :after 变得非常流行的一个原因是它们可以增加纯CSS设计的复杂度。不需要多余的标签,我们可以使用伪元素添加额外的可样式化的元素或层级。
来看一个例子,这是一个简单的按钮,圆形并有红色的渐变。
?
现在,我们需要在按钮的外围添加一层稍暗的区域,并且给它一个内阴影效果,看起来就像是嵌入的一样。这次,我们不用添加额外的标签,只需要用一个空的伪元素。
?
?
接下来,我们又想加一层同样的效果。这一次,我们使用 :after
?
通过
:before 和 :after 你还能做什么?
使用很广泛,下面给出几个比较流行的例子
清除浮动
CSS的浮动很让人头痛,世界各地的开发者都在寻找更好的解决方法。
Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个,即利用 :before 和 :after 清除浮动。
?
你也许会说还有 overflow: hidden; 方式呢!当然这也是一种可选方案,当你发现overflow不合适的时候,可以选择这里提到的方式。
CSS图形
使用纯CSS实现某些复杂的图形是不是很有趣?通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。
CSS3Shapes.com 有很多例子,这里就举一个八边形的例子。
?
如果你还没过瘾,可以在 awesome roundup
of possible applications 找到更多的酷东东
相关文章推荐
- :before 和 :after 的内幕 以及伪类 ( 转 )
- :before和:after的内幕以及伪类
- 关于伪类伪元素以及:after与:before
- 伪类:before以及after
- css伪类 :before和 :after的使用详解 以及实现的一些效果
- 关于:after和:before伪类的用法,以及让浮动占据高度问题。
- 关于伪类元素:before和:after
- 伪类:before和:after的使用
- 伪类选择器 before 和after的使用 实例 制作圆角
- CSS伪类对象before和after的实例
- CSS中:before和:after伪元素的content属性以及counter属性使用
- IE67不兼容before和after伪类的最佳解决办法
- 利用伪类:before&&:after实现图标库图标
- [DIV/CSS] CSS 属性 :before && :after的用法,伪类和伪元素的区别
- 关于jiffies回绕以及time_after,time_before
- CSS :before :after 伪类选择器
- 小挖掘 伪类:before & :after
- css之伪类选择器:before :after(::before ::after)
- before和after伪类学习
- CSS伪类:before 和 :after