伪类、伪元素与内容生成
浮动清除的旧方法
<style>
img {float:right;margin:1em;}
</style>
<div id="page">
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”...</p>
<div style="clear:right;"></div>
<div>
旧式清除浮动的方法,语义上不够整洁，因为多出了一个无意义的内容为空的元素
浮动清除的新方法: 伪元素
<style>
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both; }
.clearfix {*zoom:1;}/*IE/7/6*/
</style>
<div id="page" class="clearfix">
<img src="./code/position/pic.jpg" >
<p>李白，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”...</p>
<div>
定义一个clearfix的css类，然后设置给父元素即可. 即简洁,又可重用
这段代码使用了css的几个特性：伪类、伪元素、内容生成
伪类
a:link {color: blue;} /* 未访问的链接 */
a:visited {color: red;} /* 已访问的链接 */
a:hover {color: black;} /* 鼠标划过链接 */
a:active {color: yellow;} /* 已选中的链接 */
所谓伪类,就是无法由设计师定义,而是由浏览器根据实时运行状态定义的类.譬如上例表示:
- 一个从未被上前用户访问过的链接显示为蓝色字体并带有下划线
- 曾被访问过的链接显示为紫色并带有下划线
- 当鼠标划过链接时，显示为黑色
- 当链接被点击时，链接显示为黄色并带有下划线
上述链接种种不同的状态，就好象浏览器内部有如下代码：
<a class="link">未访问过的链接</a>
<a class="visited">已访问过的链接</a>
<a class="hover">鼠标划过链接</a>
<a class="active">已选中的链接</a>
伪元素
<p>This is a example!</p>
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
p:first-line { color:#ff0000; }
普通选择器只能筛选标记元素,而伪元素选择器支持对内容元素进行筛选.
上例中，筛选出<p>中元素的第一个字符(即T字符)或第一行.而这段被选中的内容元素,并非是由文档作者预先进行标记的.所以,是伪的元素
内容生成
.clearfix:before,.clearfix:after {
content: " ";
display: table;
}
content 属性允许在文档被浏览器解析时,动态生成内容元素
上例即: 在.clearfix元素的前后各插入一段空的内容元素,并且将其盒子类型模式设置为'table',借助于表格布局的特性(详见参考),相当于进行了清除浮动