1. 元素选择器
元素名 { 属性列表 }； => div { background-color: grey;} 所有div背景为灰色
2. 属性选择器
元素名[属性名=属性值]；=> div[name="text"]{ background-color: grey;} name为text的div背景为灰色
元素名[属性名]；=> div[id]{ background-color: grey;} 设置Id属性的div背景为灰色
元素名[属性名^=属性值前缀]；=> div[id^="prefix"]{ background-color: grey;} 设置Id属性, 并且值是以prefix开始的div背景为灰色
元素名[属性名$=属性值后缀]；=> div[id$="suffix"]{ background-color: grey;} 设置Id属性, 并且值是以suffix结束的div背景为灰色
元素名[属性名*=所包含属性值关键字]；=> div[id*="contiansKey"]{ background-color: grey;} 设置Id属性, 并且值是包含containsKey的div背景为灰色
3. ID选择器
#元素ID值；=> #IdValue{background-color: grey;} id值为IdValue的div背景为灰色
4. class选择器
.class值；=> .myclass{background-color: grey;} class属性值为myclass的div背景为灰色
5. 包含选择器
选择器1 选择器2；=> div .a { background-color: grey; } div的class为a的div背景为灰色
6. 子选择器
选择器1 > 选择器2；=> div>.a { background-color: grey; } div的子元素中，class为a的div背景为灰色
7. 兄弟选择器
选择器1 ~ 选择器2；=> #android ~ .long { background-color: grey; } id为android的元素后面class为long的所有元素背景为灰色
8. 组合选择器
选择器1,选择器2,选择器3；=> div,.a,#abc { background-color: grey; } div元素、class为a、id为abc的元素背景为灰色
9. 伪选择器
有四种分别是：:first-letter :first-line :before :after
=> div>div:before{content: 'hehe',background-color: grey;} div元素内部最前面插入背景为灰色的文本'hehe'
=> p:first-line {background-color: grey;} p元素第一行的背景为灰色
