css选择器

                          css选择器

 1基本选择选择符

  

名称	选择器	描述	示例
标签选择器	E{   css规则 }	匹配文档元素标签	p {font-size:20px;}
ID选择器	#ID{   css规则   }	匹配文档元素标签的ID属性	#box{   background:red; }
类选择器	E.className{   css规则 }	匹配以class属性为className的文档元素	div.box{   font-size:20px; }
通配选择符	*{   css规则   }	匹配所有文档元素	*{   margin:0px;   border:0px; }

 

2.组合选择器

名称	选择器	描述	示例
群组选择器	E1,E2,E3{  css规则 }	同时给多个元素匹配css规则	h1,h2,h3{  color:red; }
后代选择器	E F{  css规则 }	匹配E元素的所有后代元素F	#links a{  color:red }
子选择器	E>F{  css规则 }	匹配所有E元素的子元素F	.box>span>a{ color:red; }
相邻选择器	E+F{  css规则 }	匹配紧跟E元素之后的与E元素同级别的元素F	p+p{color:red; }
兄弟选择器	E~F（css3）{  css规则 }	匹配E元素后面的所有兄弟元素F	p~p{   color:red; }

 

3.属性选择器

选择器	描述	示例
E[att]	选择具有att属性的E元素。	input[required] {border:1px solid #f00;}
E[att="val"]	选择具有att属性且属性值等于val的E元素。	input[type=password] {border:1px solid #aaa;} //定位页面里的密码输入框
E[att~="val"]	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。	div[title~=english] {color:#f88;}
E[att|="val"]	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。（css3）	p[class|=a] {color:#333;}
E[att^="val"]	选择具有att属性且属性值为以val开头的字符串的E元素。（css3）	div[class^=a] {color:#666;}
E[att$="val"]	选择具有att属性且属性值为以val结尾的字符串的E元素。（css3）	div[class$=a] {color:#f00;}
E[att*="val"]	选择具有att属性且属性值为包含val的字符串的E元素。（css3）	a[title*=link] {text-decoration:underline;}

 

 参考资料：css参考手册飘零雾雨 ：http://css.doyoe.com/