对于一个前端er，选择器是日常生活中必须接触的部分，这篇文章主要探讨一下选择其的分类及一些小技巧。
【分类】
1.基础选择器
2.结构选择器
3.伪类选择器
4.伪元素
5.属性选择器
【描述】
1.基础选择器（浏览器都兼容）
* 通配符 （可以匹配元素中所有的html元素）
如：*{color:#000;}则代表将页面全部元素添加属性为#000的颜色值；
E 元素选择器（匹配特定的标签）
如：a{text-decoration:underline;}则代表将页面所有的a标签设置下划线；
#id ID选择器（匹配页面特定的id）
如：#my{color:#000}则代表将页面id为my的元素添加属性为#000的颜色值；
.class 类选择器（匹配页面特定的class）
如：.my{color:#000}则代表将页面class为my的元素添加属性为#000的颜色值；
S1,S2 群组选择器（匹配包含S1，包含S2元素，匹配一个即可）
如：.my,.you{color:#000}则代表将页面class为my和class为you的元素添加属性为#000的颜色值；
S1S2 合并选择器（匹配包含S1及S2的元素，该元素同时必须包含S1及S2）
如：.my.you{color:#000}则代表将页面class有my及you的元素添加属性为#000的颜色值；2.结构选择器
S1 S2 后代选择器（S1所有的后代S2）
S1>S2 子选择器（S1的子元素S2 IE7+）
S1+S2 相邻兄弟选择器（S1后面的相邻兄弟元素S2 IE7+）
S1~S2 通用兄弟选择器（S1后面的所有兄弟元素S2，IE7+） 【举例图示】
a.区分S1 S2及S1,S2及S1S2三类选择器；
<div class="you me">
you and me
</div>
<div class="you">
you
</div>
<div class="me">
me
<span class="you">
you
</span>
</div> .me,.you{
color: deeppink;
}
.you.me{
background: #eee;
}
.me .you{
color: #0f0;
}添加如上结构及样式，可得到下面的效果:
可以看出来.me,.you群组选择器即只要包含了任意一个即可生效；.me .you后代选择是只有.me的后代.you才会生效，.me.you合并选择器，是需要两个选择器都包含才会生效。
b.区分各类兄弟选择器
<div class="parent">
<div class="son son1">son1</div>
<div class="son">son2</div>
<div class="son">son3</div>
<div class="son">son4</div>
</div>
<div class="son">
son other
</div> .parent >.son{
color: #0f0;
}
.son1 + .son{
text-align: center;
}
.son1 ~ .son{
background: #eee;
}添加如上结构及样式，可得到下面的效果:
3.伪类选择器
动态伪类选择器
:link
:visited
:acitve(IE8+)
:hover
:focus(IE8+)
目标伪类选择器
:target(IE9+)
语言伪类选择器
:lang(language)
ui元素状态伪类选择器（IE9+）
:checked 选中态
:enabled 启用态
:disabled 禁用态
结构伪类选择器(IE9+)
:first-child
:last-child
:root
:nth-child(n) odd even
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
n的场景 n n*length n+length -n+length n*length+b odd even
否定伪类选择器
:not (IE9+)【举例图示】
以上伪类选择器，结构伪类选择器在日常效果中应用最为广泛，应用恰当可以得到很多意想不到的效果。【具体效果会另开文章再更新】
4.伪元素
::first-letter 第一个字母
::first-line 第一行文本
::before 在元素前插入内容，但不会生成dom，可以设置样式【会在下篇文章补充说明】
::after 在元素后插入内容，但不会生成dom，可以设置样式，常用于清除浮动【会在下篇文章补充说明】5.属性选择器【IE7+】
E[attr] 匹配具有属性attr的元素E
E[attr=val] 匹配属性attr为val的元素E
E[attr|=val] 以val 或者val-开头
E[attr~=val] 属性值要包含val这个属性
E[attr*=val] 属性值中有val这个字符串就可以
E[attr^=val] 以val开头
E[attr$=val] 以val结束