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

经典的CSS Clearfix

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

.clearfix:after { content : "." ; display : block ; clear : both ; visibility : hidden ; line-height : 0 ; height : 0 ; }
.clearfix { display : inline- block ; }

html[xmlns] .clearfix { display : block ; }
* html .clearfix { height : 1% ; }

升级版的Clearfix

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

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

锚链接伪类选择器

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

 CSS3 斑马线效果

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

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

内容垂直集中

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

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