css常用的选择器分为三大类：基础选择器、行为伪类选择器和结构伪类选择器。
基础选择器
- id选择器：#idName{…}
特性：idName必须具备唯一性，标签原则上只能用一次。因其唯一性，所以在js和jQuery解析html DOM时常用它，获取唯一的元素节点。
常用：#unique{…} unique英文就是唯一的意思 - class选择器：.name{…}
特性：该选择器能够重用和组合使用，是css中最常用的基础选择器。 - 标签选择器： tagName{…}
特性：tag必须为标签名，同名标签自动响应（只做一次全局声明，无需在其后代标签里进行再次声明）。
常用：通常我们在body和body的后代选择器写一些全局样式。但是之后我 们可以在其后代添加其特有的样式去替换该全局样式。实际上是一种对样式的封装。
/*作用于body全局*/
body,body *{
margin:0;
padding:0;
box-sizing:border-box;
font:14px/1.2 arial,"Microsoft Yahei";
}
/*body所有的样式均作用于pole-single所在的标签中*/
.pole-single{
width:25%;
background-color:purple;
text-align:center;
padding-top:5px;
color:#fefefe;
/*字体大小为12px,会覆盖body里定义的全局字体大小：14px*/
font-size:12px;
}
- 并集选择器（不同选择器，样式相同）
格式：选择器,选择器{…} (3个以上使用“~”，当然原则上尽量不允许3个以上，3个以上要求要进行封装，这里和java的形参数量封装入类似)
例如：
/*作用于time和sep所在的标签*/
.time,.sep{…}
- 子代和后代选择器：
选择器>子标签名→子代选择器
选择器（空格）子标签名→后代选择器 空格一定要用 - 选择器:nth-child(an+b)选择器
* 简单数字序号写法: nth-child(number)
直接匹配第number个元素。参数number必须为大于0的整数。
* 倍数写法: nth-child(an)
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，
它是倍数写法的标志，如3n、5n。
* 倍数分组匹配: nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+
不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。
如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实
an前面也可以是负号，但留给下一部分讲。）
/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+1){background:orange;}
/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(5n-1){background:orange;}
* 反向倍数分组匹配: nth-child(-an+b)
/*匹配第8、第5和第2个LI*/
li:nth-child(-3n+8){background:orange;}
/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来
限定前面N个匹配常会用到*/
li:nth-child(-1n+8){background:orange;}
* 奇偶匹配: nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。
行为伪类选择器
- 悬浮伪类：选择器:hover{…} 鼠标进入执行伪类，离开放弃伪类
- 点击伪类：选择器:active{…} 鼠标左键单击执行伪类，松开放弃伪类
结构伪类
- 前置伪类: selector::before{…}
- 后置伪类: selector::after{…}
综合
/*selector（除第一个子类）的所有子类的前置伪类*/
selector >:not(:first-child)::before{…}
/*selector行为伪类hover的前置元素伪类*/
selector:hover:before{…}
/*进入父选择器区域：子代选择器发生伪类作用*/
选择器:hover>子代选择器