选择器

使用选择器的原则，一定要准，要精确，尽量不用别的，都用classname。像 .bd .slider这种，要直接写成.slider

 

选择器			css	jquery	解释
基本选择器 ie基本只支持这些	*	通配选择器	*{}	$("*")	所有元素
	E	元素选择器	p{}	$("p")	所有p标签
	#id	ID选择器	#hd{}	$("#hd")	id是hd的元素
	.class	类选择器	.logo{}	$(".logo")	class是logo的元素
	selector1,selectN	群组选择器	div,span,p{}	$("div,span,p")	所有div、span、p
层次选择器	E F	后代选择器	body div{}	$("body div")	页面上所有div
	E>F	子选择器	body>div{}	$("body>div")	页面上所有第一层div
	E+F	相邻兄弟元素	.logo+div	$(".logo+div")或$(".logo").next(F)	紧邻class是logo的元素后面的div
	E~F	通用兄弟选择器	.logo~div	$(".logo~div")或$(".logo").nextAll(F)	class是logo的元素后面的所有div
动态伪类选择器	E:link	链接伪类选择器	a:link{}	no	未被点击的所有a标签
	E:visited	链接伪类选择器	a:visited{}	no	被点过的所有a标签
	E:active	用户行为伪类选择器	input:active{}	no	所有点击过的input框
	E:hover	用户行为伪类选择器	a:hover	no	鼠标停留在的a标签
	E:focus	用户行为伪类选择器	inupt:focus	no	点击着的input框
基础内容过滤器	E:focus	焦点	no	$(":focus")	****
	E:even	偶	no	$("input:even")	选取索引是偶数的input
	E:odd	奇	no	$("input:odd")	选取索引是奇数的input
	E:eq(n)/E:gt(n)/E:lt(n)	前后	no	$("input:eq(1)")/$("input:gt(1)")/$("input:lt(1)")	选取索引等于/大于/小于index元素的input
	E:header	h标签	no	$(":header")	选取所有的标题元素
	E:animated	动画	no	$("div:animated")	选取当前正在执行的动画元素
	E:first	第一个	no	$("ul>li:first")	****
	E:last	最后一个	no	$("ul>li:last")	****
否定选择器	E:not(F)	否定选择器	input:not([type=submit]){}	$("input:not(type=submit)")	****
结构伪类选择器	E:first-child	第一个子元素	ul>li:first-child	no	选取div中第一个div
	E:last-child	最后一个子元素	ul>li:last-child	no	选取div中最后一个div
	F E:nth-child(n)	F的第n个E类型的子元素	ul>li:nth-child(2)	no	****
	F E:nth-last-child(n)	F的最后一个E类型的子元素	ul>li:nth-last-child	no	****
	E:root	匹配根元素，始终是html	div：root	no	****
	E:nth-of-type(n)	第E类型的子元素	div>p:nth-of-type(2)	no	****
	E:first-of-type	第一个e类型的子元素	div:first-of-type	no	****
	E:nth-last-of-type(n)或E:last-of-type	最后一个e类型的子元素	div>p:nth-last-of-type	no	****
	E:only-child	选择父元素只包含一个子元素，且类型为E	p:only-child	no	****
	E:only-of-type	选择父元素只包含一个同类型的元素，且类型为E	p:only-child	no	****
	E:empty	选择没有子元素的元素，且没有任何文本节点	p:empty	no	****
UI元素状态伪类选择器	E:checked或E[checked]	选中状态伪类选择器	.chekbox:checked	$("input:checked")	所有选中的class为chekbox的元素
	E:enabled	启用状态伪类选择器	yes	$("#form1:enabled")	****
	select option:selected	选取被选中的元素	no	$("select option:selected")	****
	E：disabled	不可用状态伪类选择器	yes	$("#form2:disabled	****
伪元素选择器	::first-letter	选择文本块的第一个字母	yes	no	****
	::first-line	选择第一行文本	yes	no	****
	::befor和::after	额外内容位置，不加入DOM，需要content属性辅助，通常用来做ICON	yes	no	****
	::selection	匹配突出显示的文本，仅接受两个属性background和color	yes	no	****
属性选择器	E[attr]	选择具有属性attr的元素	yes	$("div[id]")	****
	E[attr=val]	选择具有attr属性，且属性值等于val的元素	yes	$("div[title=test]")	****
	E[attr!=val]	不等于val的元素	no	$("div[title!=test]")	****
	E[attr|=val]	属性值等于val或以val-开头	yes	$("div[title|=test]")	****
	E[attr~=val]	属性值以空格分隔，有一个属性为val	yes	$("div[title~=test]")	****
	E[attr*=val]	属性值中任意位置包含val	yes	$("div[title*=test]")	****
	E[attr^=val]	属性值以val开头	yes	$("div[title^=test]")	****
	E		no	$("div[id=a][title$=test]")	****
	E[attr$=val]	属性值以val结尾	yes	$("div[title$=test]")	****
可见性过滤器	E:hidden	选取不可见元素	no	$(":hidden")	****
	E:visible	选取可见元素	no	$(":visible")	****
内容过滤器	E:contains(text)	选取文本中含有test的元素	no	$("div:contains('aaa')")	****
	E:empty	选取不含子元素和文本元素的元素	no	$("div:empty")	****
	E:has(selector)	选取含有选择器所匹配的元素	no	$("div:has(p)")	****
	E:parent	选取含有子元素和文本元素的元素	no	$("div:parent")	****
表单选择器	$(":input")	选取所有input、textara、select、button	no	$(":input")	****
	$(":text")	选取所有单行文本	no	$(":text")	****
	$(":password")		no	$(":password")	****
	$(":radio")		no	$(":radio")	****
	$(":checkbox")		no	$(":checkbox")	****
	$(":submit")	选取所有提交按钮	no	$(":submit")	****
	$(":image")		no	$(":image")	****
	$(":reset")		no	$(":reset")	****
	$(":button")		no	$(":button")	****
	$(":file")		no	$(":file")	****
	$(":hidden")		no	$(":hidden")	****