CSS3选择器

CSS3选择器

            • 属性选择器
		1、E[attr]{} 			只使用属性名，但没有确定任何属性值
		2、E[attr=“value”]{} 	指定属性名，并指定了该属性的属性值（只能有value值）
		3、E[attr~=“value”]{} 	指定属性名，并且包含该属性值，而且等号前面的“〜”必须的
		4、E[attr^=“value”]{} 	指定了属性名，并且有属性值，属性值是以value开头的（可以剪切字符串）
		5、E[attr$=“value”]{} 	指定了属性名，并且有属性值，而且属性值是以value结束的（可以剪切字符串）
		6、E[attr*=“value”]{} 	指定了属性名，并且有属性值，而且属值中包含了value（可以剪切字符串）
		7、E[attr|=“value”]{} 	指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）
	 
	 • 伪类选择器◦ 
		①结构性伪类选择器
		X:first-child			匹配子集的第一个元素。IE7就可以支持
		X:last-child 			匹配父元素中最后一个X元素
		X:nth-child(n) 			用于匹配索引值为n的子元素。索引值从1开始	（若为n则匹配为所有，2n为偶数列，2n-1为奇数列）
		X:only-child 			这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
		X:nth-last-child(n) 	从最后一个开始算索引。
		
		X:first-of-type 		匹配同级兄弟元素中的第一个X元素
		X:last-of-type 			匹配同级兄弟元素中的最后一个X元素
		X:nth-of-type(n) 		匹配同类型中的第n个同级兄弟元素X
		X:only-of-type 			匹配属于同类型中唯一兄弟元素的X（有很多同级元素，但只有一个X）
		X:nth-last-of-type(n)      	匹配同类型中的倒数第n个同级兄弟元素
		
		X:root 					匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
		X:empty 				匹配没有任何子元素（包括文本）的元素X 
	  
	        ② 目标伪类选择器
		E:target 	选择匹配E的所有元素，且匹配元素被相关URL 
	
	        ③ UI 元素状态伪类选择器
		E:enabled		匹配所有用户界面（form表单）中处于可用状态的E元素
		E:disabled		匹配所有用户界面（form表单）中处于不可用状态的E元素
		E:checked		匹配所有用户界面（form表单）中处于选中状态的元素E
		E::selection	    匹配E元素中被用户选中或处于高亮状态的部分  
	  
	        ④ 动态伪类选择器
		E:link 		链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
		E:visited 	链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
		E:hover 	用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
		E:active 	用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
		E:focus 	用户行为选择器选择匹配的E元素，而且匹配元素获取焦点
	  
	 • 层级选择器
		E>F 	子选择器			选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
		E+F 	相邻兄弟选择器	        选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
		E~F 	通用选择器		选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素