css常用的选择器

css常用的选择器分为三大类：基础选择器、行为伪类选择器和结构伪类选择器。

基础选择器

1. id选择器：#idName{…}
   特性：idName必须具备唯一性，标签原则上只能用一次。因其唯一性，所以在js和jQuery解析html DOM时常用它，获取唯一的元素节点。
   常用：#unique{…} unique英文就是唯一的意思
2. class选择器：.name{…}
   特性：该选择器能够重用和组合使用，是css中最常用的基础选择器。
3. 标签选择器： 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;
}

4. 并集选择器（不同选择器，样式相同）
   格式：选择器,选择器{…} (3个以上使用“~”，当然原则上尽量不允许3个以上，3个以上要求要进行封装，这里和java的形参数量封装入类似)
   例如：

/*作用于time和sep所在的标签*/
.time,.sep{…}

5. 子代和后代选择器：
   选择器>子标签名→子代选择器
   选择器（空格）子标签名→后代选择器 空格一定要用
6. 选择器: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)
			分别匹配序号为奇数与偶数的元素。

行为伪类选择器

1. 悬浮伪类：选择器:hover{…} 鼠标进入执行伪类，离开放弃伪类
2. 点击伪类：选择器:active{…} 鼠标左键单击执行伪类，松开放弃伪类

结构伪类

1. 前置伪类: selector::before{…}
2. 后置伪类: selector::after{…}

综合

/*selector（除第一个子类）的所有子类的前置伪类*/
selector >:not(:first-child)::before{…}

/*selector行为伪类hover的前置元素伪类*/		
selector:hover:before{…}	

/*进入父选择器区域：子代选择器发生伪类作用*/	
选择器:hover>子代选择器