几段常用的css代码（Clearfix、锚链接伪类、斑马线、内容垂直居中）

经典的CSS Clearfix

　　这个clearfix代码已在Web开发者之间广泛流传，这段类选择器要应用到持有浮动元素的容器中，确保后面的内容都不会浮动，但会被下推和清除。

1 2 3 4 5

.clearfix:after { content : "." ; display : block ; clear : both ; visibility : hidden ; line-height : 0 ; height : 0 ; } .clearfix { display : inline- block ; }   <font></font>  html[xmlns] .clearfix { display : block ; } * html .clearfix { height : 1% ; }

升级版的Clearfix

　　在表现上，新版本和经典版本不存在什么差异，这些类可以有效地清除所有floats，但它们只兼容现代浏览器和传统的IE 6-8。

1 2 3 4

.clearfix:before, .container:after { content : "" ; display : table; }<font></font>  .clearfix:after { clear : both ; } /* IE 6/7 */ .clearfix { zoom: 1 ; }

锚链接伪类选择器

1 2 3 4

a:link { color : blue ; } a:visited { color : purple ; } a:hover { color : red ; } a:active { color : yellow; }

 CSS3 斑马线效果

　　当用户在浏览许多行数据时，很难分清哪一个单元格是属于哪一行的。默认情况下，通过添加斑马线，用户可以给奇偶行更新不同的背景色。

1 2 3

tbody tr:nth-child(odd) {      background-color : #ccc ; }

内容垂直集中

　　相对于内容在水平位置，内容在垂直方向是不好把控的，尤其当考虑到滚动条这些因素时。这段纯CSS代码可以很好的工作。

1 2 3 4 5

.container {      min-height : 6.5em ;      display : table-cell ;      vertical-align : middle ; }