css中的:before 和 :after
来源:互联网 发布:淘宝账号注册首页登录 编辑:程序博客网 时间:2024/05/22 10:35
:before 和 :after 的内幕
伪类 VS 伪元素
这两个概念很容易混淆,即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单,如下:
伪类:作用对象是整个元素
首先,来看几个伪类
a:link {
color
:
#111
}
a:hover {
color
:
#222
}
div:first-child {
color
:
#333
}
div:nth-child(
3
) {
color
:
#444
}
如你所见,尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。
伪元素:作用于元素的一部分
还是来看几个例子:
p::first-line {
color
:
#555
}
p::first-letter {
color
:
#666
}
a::before {content :
"hello world"
;}
如你所见,伪元素作用于元素的一部分:一个段落的第一行 或者 第一个字母。
更加神奇的是可以作用于并未加入HTML的对象,这就是:before 和 :after,也就是本文要说的内容。
:before VS ::before
为什么有两种写法呢?它们的效果一样么?
答案是一样的,来看一个例子:
/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}
/*CSS3*/
.example::before {}
.example::after {}
.example:first-child {}
在CSS2中,我们使用一个冒号表示伪类和伪元素。然而,为了区别已有的这两个,CSS3专门为伪元素设计了两个冒号。
IE再次毁了一切
所有现代浏览器都支持 :: 语法,但是悲剧的IE8不支持,大多数开发者为了兼容IE,使用CSS2的 :。为了保持简单一致,本文后面的部分都是用CSS2格式。
什么是 :before 和 :after
:before 和 :after 使你可以通过CSS加入一些内容,从而避免了HTML的凌乱。特别是一些装饰性的元素,从语义化考虑本就不该出现在HTML中。
举个例子,你的网站有一些电话号码,你希望在它们前面加一个icon ☎。你可以用 :before 伪元素实现这个效果:
.phoneNumber:before {
content
:
"☎"
;
font-size
:
15px
;
}
这段代码使得.phoneNumber的所有元素的前面插入了一个icon。:after 作用一样,你可以猜到会出现什么效果了
.phoneNumber:after {
content
:
"$#9742"
;
font-size
:
15px
;
}
--------------------------------------------------------------------------------
一个简洁的例子
最近,:before 和 :after 变得非常流行的一个原因是它们可以增加纯CSS设计的复杂度。不需要多余的标签,我们可以使用伪元素添加额外的可样式化的元素或层级。
来看一个例子,这是一个简单的按钮,圆形并有红色的渐变。
.button {
height
:
100px
;
width
:
100px
;
position
:
relative
;
margin
:
50px
;
color
:
white
;
text-align
:
center
;
line-height
:
100px
;
/*Rounded Corners and Shadows*/
-webkit-border-radius:
100px
;
-moz-border-radius:
100px
;
border-radius:
100px
;
-webkit-box-shadow:
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
-moz-box-shadow:
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
box-shadow:
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
/*Ridiculous Gradient Syntax*/
background
:
#e51d16
;
/* Old browsers */
background
: -moz-linear-gradient(
top
,
#e51d16
0%
,
#b21203
100%
);
/* FF3.6+ */
background
: -webkit-gradient(linear,
left
top
,
left
bottom
, color-stop(
0%
,
#e51d16
), color-stop(
100%
,
#b21203
));
/* Chrome,Safari4+ */
background
: -webkit-linear-gradient(
top
,
#e51d16
0%
,
#b21203
100%
);
/* Chrome10+,Safari5.1+ */
background
: -o-linear-gradient(
top
,
#e51d16
0%
,
#b21203
100%
);
/* Opera 11.10+ */
background
: -ms-linear-gradient(
top
,
#e51d16
0%
,
#b21203
100%
);
/* IE10+ */
background
: linear-gradient(
top
,
#e51d16
0%
,
#b21203
100%
);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=
'#e51d16'
, endColorstr=
'#b21203'
,GradientType=
0
);
/* IE6-9 */
}
效果如下:
现在,我们需要在按钮的外围添加一层稍暗的区域,并且给它一个内阴影效果,看起来就像是嵌入的一样。这次,我们不用添加额外的标签,只需要用一个空的伪元素。
.button:before {
content
:
""
;
}
现在我们开始实现想要的效果。
.button:before {
content
:
""
;
width
:
100%
;
height
:
100%
;
display
:
block
;
z-index
:
-1
;
position
:
relative
;
padding
:
15px
;
background
:
#ddd
;
left
:
-15px
;
top
:
-15px
;
-webkit-border-radius:
100px
;
-moz-border-radius:
100px
;
border-radius:
100px
;
-webkit-box-shadow:
inset
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
-moz-box-shadow:
inset
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
box-shadow:
inset
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
}
现在按钮看起来更立体了。 :before 实现了外围的圆环。我们把z-index设置为-1,使它位于按钮的下方,并且使用相对定位校正位置。
接下来,我们又想加一层同样的效果。这一次,我们使用 :after
.button:after {
content
:
""
;
width
:
100%
;
height
:
100%
;
display
:
block
;
z-index
:
-2
;
position
:
relative
;
padding
:
25px
;
background
:
#eee
;
position
:
absolute
;
left
:
-25px
;
top
:
-25px
;
-webkit-border-radius:
100px
;
-moz-border-radius:
100px
;
border-radius:
100px
;
-webkit-box-shadow:
inset
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
-moz-box-shadow:
inset
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
box-shadow:
inset
2px
2px
4px
rgba(
0
,
0
,
0
,
0.4
);
}
效果如下:
通过 :before 和 :after 你还能做什么?
使用很广泛,下面给出几个比较流行的例子
清除浮动
CSS的浮动很让人头痛,世界各地的开发者都在寻找更好的解决方法。
Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个,即利用 :before 和 :after 清除浮动。
/* For modern browsers */
.cf:before,
.cf:after {
content
:
""
;
display
:table;
}
.cf:after {
clear
:
both
;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:
1
;
}
这里 :before 阻止了 top-margin 合并, :after则用于清除浮动,这种方法做的极为干净漂亮。
你也许会说还有 overflow: hidden; 方式呢!当然这也是一种可选方案,当你发现overflow不合适的时候,可以选择这里提到的方式。
CSS图形
使用纯CSS实现某些复杂的图形是不是很有趣?通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。
CSS3Shapes.com 有很多例子,这里就举一个八边形的例子。
#octagon {
width
:
100px
;
height
:
100px
;
background
:
blue
;
}
#octagon:before {
height
:
0
;
width
:
40px
;
content
:
""
;
position
:
absolute
;
border-bottom
:
30px
solid
blue
;
border-left
:
30px
solid
white
;
border-right
:
30px
solid
white
;
}
#octagon:after {
height
:
0
;
width
:
40px
;
content
:
""
;
position
:
absolute
;
border-top
:
30px
solid
blue
;
border-left
:
30px
solid
white
;
border-right
:
30px
solid
white
;
margin
:
70px
0
0
0
;
}
可以看到,通过定位、设置border,我们就能把一些简单的形状组合成复杂的图形,相当的酷!
如果你还没过瘾,可以在 awesome roundup of possible applications 找到更多的酷东东
原网页 :http://blog.csdn.net/zhuizhuziwo/article/details/7897837
- css中的:before 和 :after
- css中的before,after
- 学习使用css中的":before"和":after"
- css中的before和after的作用
- CSS:before和after中的content属性
- CSS :before 和 :after
- CSS ::before 和 ::after
- CSS 巧用 :before和:after
- 论CSS ::before 和 ::after
- css中伪类 :before和:after
- CSS 巧用 :before和:after
- CSS 巧用 :before和:after
- CSS 巧用 :before和:after
- CSS巧用:before和:after
- CSS中的before和after伪元素及其应用
- CSS中的before和after伪元素及其应用
- 利用CSS中的After和Before解决CSS中的2个BUG
- CSS伪元素样式 :before 和 :after
- ubuntu中apt-get dpkg应用出现的问题及解决方法
- AVL树C语言实现
- 二叉树的基本操作和遍历
- win32使用ATL显示C#COM窗体
- 【陈式兔子定理】本科生、硕士生、博士生、博士后之区别
- css中的:before 和 :after
- android摇一摇
- 【C++注意事项】2 变量声明和定义
- ACdream 1430 SETI 后缀自动机
- Oracle使用APEX与ADF快速开发漂亮的WEB应用
- Android UI 之一步步教你自定义控件(自定义属性、合理设计onMeasure、合理设计onDraw等)
- 【Java】Java集合框架源码和数据结构简要分析——List
- Intellij IDEA搭建Android Wear开发环境(Windows环境,含创建模拟器)
- 计算机学习总结