一、通配符选择器（＊）
*{
marigin: 0;
padding: 0;
}
二、元素选择器(E)
li {background-color: grey;color: orange;}
三、类选择器（.className）
四、id选择器（#ID）
#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
五、后代选择器（Ｅ Ｆ）
.demo li {color: blue;}
六、子元素选择器(E>F)
ul > li {background: green;color: yellow;}
七、相邻兄弟元素选择器(E + F)
li + li {background: green;color: yellow; border: 1px solid #ccc;}
八、通用兄弟选择器（Ｅ ? Ｆ）
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
九、群组选择器（selector1,selector2,...,selectorN）
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
.demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
input:not([type="submit"]) {border: 1px solid red;}
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}