html代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="test1">test1</div>
<div class="test2 clear">test2</div>
<div>test3</div>
<div data-id="12">test4</div>
</body>
</html>
一、基本选择器:
1.元素选择器
div{color:red;backgroud-color:blue;}//选择div元素
2.ID选择器
div#test1{color:red;backgroud-color:blue;}//选择id为test1的div元素
3.类选择器
div.test2{color:red;}//选择类为test2的div元素
4.属性选择器（类似类选择器）
div[data-id]{color:#0000FF;}//选择包含属性data-id的div元素
5.后代选择器
body div.test2{color:#0000FF;}//选择body后代中，类为test2的div元素
二、特殊选择器
1.分组选择器（对该分组运用相同的css,各个选择器用','隔开）
body,div.test2{font-size:12px;}//选择body和类为test2的div元素
2.通配符选择器(对所有元素运用相同css)
*.test1{color:blue;}//对所有类为test1的元素运用css
3.多个类选择器
.test2.clear{border:1px solid #FF0000;}//选择类为test2 并且类为clear的元素
4.具体属性值选择器
div[data-id="12"]{color:#00FF00;}//选择包含属性data-id并且data-id="12"的div元素
5.部分属性值选择器
div[class ~="clear"]{color:#00FF00;}//选择包含属性class,并且class值中包含clear的div元素
6.子元素选择器
body > div#test1{color:#00FF00;}//选择body子元素（直接后代）中的id为test1的div元素
7.相邻兄弟元素选择器
div#test1 + div.test2{margin-top:0;}//选择 id为test1的div元素 的相邻元素中的 类为test2的div元素
三、伪类和伪元素
1.伪类（参见：http://www.w3school.com.cn/css/css_pseudo_classes.asp）
a:link {color: #FF0000}
2.伪元素（参见： http://www.w3school.com.cn/css/css_pseudo_elements.asp）
div:after{content:"test";color:red;}
3.伪类与伪元素的区别（参见： http://segmentfault.com/blog/stephenlee/1190000000484493）
-
CSS伪类用于向某些选择器添加特殊的效果。 -
CSS伪元素用于将特殊的效果添加到某些选择器。