1.标签选择器

eg:
div {color : red;}

2.类选择器

eg:

<div class='box eg'></div>
.box{color : red;}
.box.eg{color : red;} // 同时满足两项

3.ID选择器

eg:
<div id="div1">
</div> #div1{color : red;} // 同一文档中，元素id必须保证唯一性(虽然不会报错)

4.属性选择器

4.1 [class]{color : red;} 应用于所有含class属性的元素，不管属性的值
4.2 [class='box']{color : red;} 应用于name属性的值为box(值必须完全匹配)的元素 class="box eg"则不会应用该样式 [class='boxeg']也不会，因为值必须完全匹配。
4.3 [class~='box']{color:red;} 只要class属性的值包含box就可以，不需要完全匹配。
4.4 [class^='box'] {color : red;} class属性的值必须以box开头才能应用该样式。
4.5 [class$='box']{color :red;}class属性的值必须以box结尾
4.6 [class*='box']{color :red;} 只要class属性的值包含box子串

5.后代选择器

div span{color : red;}所有是div后代的span，不管嵌套的又多深

6.孩子选择器

div > span{color :red;} 只选择是div的第一代孩子的span。

7.相邻兄弟选择器

div+span{color :red}；和div在同一层级，且邻接在div的后面的span

伪类和伪元素

伪类：

a:link 用于没有访问的超链接(必须是有href熟悉的)
eg: <a >1</a> a:link{color:red;}不会对这个a标签起作用
a:visited 已经访问了的超链接
a:active 元素被激活时,例如点击等
:hover 鼠标悬浮在元素上时，可以作用在任意元素上
：focus 元素获得输入焦点时
p:first-child {color : red} 应用于作为某个元素第一个孩子的p元素，不是p的第一个元素，这和下面说的伪元素有区别。

伪元素：

p：first-letter {color ：red;} p元素的首字母颜色变为红色
p:first-line{color:red} p元素的首行字体颜色为红色
p:before{content : 'xxx' ;color : red} 在p元素的内容之前插入内容，content指定内容
p:after{content : 'xxx'}在p元素内容的最后插入内容。
更多伪类和伪元素参照w3school