p.className a : 所有应用了className样式的p节点中的a元素。
p .className a :p内，任何用了className的节点下的a元素。
p element a :p内，element 节点下的a元素。
p , .className,#elementId :样式同时应用于p .className #elementId
p>a :p的直接a子节点。
p+a:a和p同父亲，a紧邻p
a[href='www.google.com'] a[href] .className[attribute] :属性选择器，
//组合
.fs-12{font-size:12px}
.fs-14{font-size:14px}
.pd-10{padding:10px}
.pd-20{padding:20px}
.box{
border:1px solid #ccc;
}
.box.gray{background:#f1f1f1}
.box.green{background:#66ff66}
Html
<div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div>
<div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div>
//继承
.box-gray,
.box-green{
border:1px solid #ccc;
font-size:12px;
padding:10px;
}
.box-gray{background:#f1f1f1}
.box-green{background:#66ff66}
///组织css
//文件级组织。
所有页面，一般是reset级别：base.css
经典reset资源:http://sofish.de/736
抽象出来适用于所有页面的css：common.css。
适用于组件级别的css:xxxControl.css。
适用于某个页面的css,pageName.css.
某个用户定制化css,clientName.css
//文件内部css组织，看上去像有面向对象的继承和命名空间,适用-字母链接
developer-namespace-class-stylename.
尽管去用-分得更细。
//hack
1，适用if 条件注释
<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
2，加特殊字符在样式前（http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/）
區別IE6、IE7、IE8、Firefox
【辨識符號】：「\9」、「*」、「_」
#tip {
background:blue; /*Firefox 背景變藍色*/
background:red \9; /*IE8 背景變紅色*/
*background:black; /*IE7 背景變黑色*/
_background:orange; /*IE6 背景變橘色*/
}