CSS3_css选择器（详细汇总）

本文为新手小白系统汇总的，如果表达有误欢迎提出；如需转载，请注明出处，谢谢！

基本选择器及其扩展

1.子元素选择器
	#wrap > #first（选中#wrap的儿子元素first，不选择其他隔代后代元素）
2.相邻兄弟元素（只会匹配紧跟的下面的兄弟元素）
	#wrap > #first +.inner
	必须是紧跟着的下面的类名为inner的元素,中间不能有别的元素
eg:	<div id="wrap"></div>
	<div id="first"></div>
	<div class="inner"></div>选择此行
	<div class="inner"></div>
3.通用兄弟选择器（只要是该元素下面的元素就可，不需要紧跟相邻，中间可以有别的元素）
	#wrap > #first ~ .inner

属性选择器

1.存在和值属性选择器
[attr],该选择器选择包含attr属性的所有元素，不论attr的值为何。
[attr="value"],该选择器选择attr属性值为“value”的所有元素。
[attr~="value"],该选择器选择带有attr属性命名并且值含有为“value”列表的元素。
2.子串值属性选择器
[attr|="value"],该选择器选择attr属性值以value-开头和value。
[attr^="value"],该选择器选择attr属性值以value开头和value。
[attr$="value"],该选择器选择attr属性值以value结尾和value。
[attr*="value"],该选择器选择attr属性值含有字符串"value"。

伪类与伪类选择器

1.链接伪类：（只能是超链接）
:link   表示作为超链接，并指向一个未访问的地址的所有锚		
:visited   表示作为超链接，并指向一个已经访问过的地址的所有锚
:target   代表一个元素，这个元素必须是URI片段

2.动态伪类：
：hover 鼠标移到，扫过元素时会变成某某样式
：active   鼠标点击元素时会变样式
	

ps：visit的只有三个样式可以作用于已访问链接：
	color
	background-color
	border-color
	
	:link,:visited不能放在最后
	
3.表单伪类
：enable  匹配可编辑的表单
：disable 匹配已禁用的表单
：checked 匹配被选中的表单（自定义表单选项）
：focus 匹配正点击的表单

ps:label是内联元素
	
* 绝对定位盒模型;
		 * 子元素的left+width+margin+padding+right=父元素的content的width
		 *          0    100    0   0       0       100
		 * 子元素的top+height+margin+padding+bottom=父元素的content的height
		 *          0    100    0   0       0       100
		 

4.结构性伪类
:nth-child(index)系列  
eg：ul li:nth-child(1)  选中ul标签下的第一个子元素
	并且如果第一个子元素是li，则执行；如果不是li，则什么都不选择						
 ①：first-child
	eg:  p:first-child选中第一个子元素，而且为p	
 ②：last-child
	eg： p:last-child选中最后一个孩子，并且为p
 ③p:nth-last-child(index)
 选中倒数第index个元素，并且必须是p元素
 ④：only-child
 必须为独生子元素

:nth-of-type（index）系列
eg:ul li:nth-of-type(1)选择ul下第一个li标签
①：first-of-type
	选中第一个元素
②：last-of-type
	选中最后一个元素
③：nth-last-child(index)
	选中第几个为什么的元素
④：only-of-type
	选中唯一一个某类型的元素
重要区别：
nth-of-type(index)以元素为中心
注意：index只能是变量n，0~正无穷
					odd/2n+1，0到正无穷的奇数
					even/2n，偶数

:not

:empty
内容必须为空，空格也不行，但是可以有attr属性
eg:div:empty,选择空的div

5.伪元素选择器
一般用双冒号，靠css生成
一个元素只能after，before伪元素选择器

css声明优先级（阐述对css选择器有何理解）

选择器的特殊性
	选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如0,0,0,0
	一个选择器的具体特殊性如下确定：
		1.ID属性值 0,1,0,0
		2.各个类属性，属性选择，伪类0,0,1,0
		3.各个元素和伪元素0,0,0,1
		4.通配符选择器0,0,0,0
		5.结合符选择器对特殊性无贡献 逗号
		6.内联声明的特殊性1,0,0,0 HTML的style属性
		7.继承无特殊性	
		特殊性1,0,0,0大于其他任何0开头的特殊性（不进位）
		如果多个规则与同一个元素匹配，则选择特殊性最大的
		eg：div[id="test"]0,0,1,1元素加属性
			#test ID选择器0,1,0,0

重要声明
	！important总是要放在声明最后，分号前面
	如果重要声明和非重要声明发生冲突，重要声明和非重要声明分开考虑，组内斗，胜出的是重要声明
	
继承
	无特殊性
	0特殊性比无特殊性强
	
来源
	css样式来源大致有三种：
	创作人员
	读者
	用户代理
	
	权重：
	读者的重要声明
	创作人员的重要声明
	创作人员的正常声明
	读者正常声明
	用户代理的声明
	
层叠
	1.来源不同，按来源排序
	2.来源一样，按选择器的特殊性
	3.选择器的特殊性一样，按顺序