一段CSS代码求高手解读，有追分哟~

1：大于号的问题是指子选择符

. header span{...}这样写,header下的不论是儿子辈的span还是孙子辈的span都应用样式;
. header>span{...}这样写,header下的子辈span的样式;
2：:before 伪元素在元素之前添加内容。
:after 伪元素在元素之后添加内容。
这2个伪元素允许创作人员在元素内容的 最前面/最后面 插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。该二伪类不被IE6/7所支持。
比如解释一下
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
这个的意思就是给类名为clerfix的元素后面添加一个内容为一个“.”的元素，并设置为块级元素，隐藏等等。

clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
这段是清除浮动的。

.container > header > span 跟.container header span(定义这个位置的所有span)不同的是：这是定义container 下所有子级header(注意，孙级同名称就不应用这个样式)下的所有子级 span 应用这个样式。

.container > header > span span:after {
width: 30px;
height: 30px;
left: -12px;
font-size: 50%;
top: -8px;
font-size: 75%;
position: relative;
这个span后插入一个宽30px,高30px的框,距左-12px,距上-8px

这是相邻兄弟选择器，
XX>YY
表示选择紧接在 XX元素后出现的所有兄弟 YY元素

实际上就是清浮动