css伪类,伪元素
来源:互联网 发布:java 获取cst时间 编辑:程序博客网 时间:2024/04/29 21:52
伪类作用于整个元素,比如:
a:link{color:#111;}
a:hover{color:#222;}
div:first-child{color:#333;}
尽管这些条件都不是基于Dom的,但结果没一个都是作用于一个完整的元素,比如整个链接,段落,div等等;
伪元素作用于元素一部分,比如:
p::first-line{color:#555;}
p::first-letter{color:#666;}
伪元素作用于元素的一部分,一个段落的第一行或者第一个字母;
:before于::before作用一样,前者是css2的写法,后者是css3的写法
作用一:
:before和:after可以增加纯css设计的复杂度,不需要多余的标签,我们可以使用伪元素添加额外的可样式化的元素或层级。比如想在电话号码字体前面加上一个电话的icon图标,我们就可以这样做:
.phoneNumber:before {
content
:
"☎"
;
font-size
:
15px
;
}
作用二:
清除浮动
/* 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则用于清除浮动
0 0
- css 伪类 伪元素
- css伪类,伪元素
- CSS 伪元素 伪类
- CSS伪类、伪元素
- CSS 伪类/元素
- CSS-伪类、元素
- CSS伪类与CSS伪元素
- CSS伪类与CSS伪元素
- CSS 伪类与伪元素
- CSS中的伪类与伪元素
- css伪类和伪元素
- CSS 伪类与伪元素
- css 伪类与伪元素
- [CSS]伪类与伪元素
- CSS伪元素,伪类选择器
- CSS伪类和伪元素
- CSS伪类和伪元素
- css伪类以及伪元素
- Javascript之DOM操作技术
- 20
- HDOJ 题目4313 Matrix(类似克鲁斯卡尔)
- 【javascript高级程序设计】读书摘录1 JavaScript简介
- 乘法逆元
- css伪类,伪元素
- HDU3038 How Many Answers Are Wrong 【并查集】
- 浙江省第6届程序设计竞赛结题报告汇总 zoj3202-3212
- HTML5-使用CSS3
- 【leetcode】Best Time to Buy and Sell Stock III
- 20万游客“挤爆”济南芙蓉街 “循环进出”缓解压力
- mac下mysql编码问题解决纪录
- c++结构体
- 【C语言】计算1-1/2+1/3-.......+1/99-100的值