一、选择器总结

（1）元素选择器（文档的元素，如a,ul,p,div等）

(2) 通配符（选择所有元素，也可以选择某个元素下的所有元素）

（3）类选择器

使用类选择器之前需要在html元素上定义类名	<li class="active important items">2</li> .important {font-weight: bold; color: yellow;
类选择器还可以结合元素选择器来使用	p.items {color: red;}
多类选择器	.important.items {background:#ccc;}

（4）id选择器

（5）后代选择器（ＥＦ）（选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开）

（6）子元素选择器(E>F)（Ｆ仅仅是Ｅ的子元素而已）

（7）相邻兄弟元素选择器(E + F)（EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻）

（8）通用兄弟选择器（Ｅ〜Ｆ）（E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择所有Ｅ元素后面的Ｆ元素）

（9）群组选择器（将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开）

（10）属性选择器

E[attr]：只使用属性名，但没有确定任何属性值；	.demo a[href][title] {background: yellow; color:green;}
E[attr="value"]是指定了属性值“value”	.demo a[href="index.html"][title] {background: yellow; color:green;}
E[attr~="value"]只要属性值中有一个value相匹配就可以选中该元素	.demo a[title~="website"]{background:orange;color:green;} 属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是 value时才匹配
E[attr^="value"] 选择attr属性值以“value”开头的所有元素	.demo a[href^="http://"]{background:orange;color:green;} .demo a[href^="mailto:"]{background:green;color:orange;}
E[attr$="value"] 选择元素attr属性，并且他的属性值是以value结尾的	.demo a[href$="png"]::before{ background:orange;color:green;}
E[attr*="value"] 所选择的属性，其属性值中有这个"value"值都将被选中	.demo a[title*="site"]{background:black;color:white;}
E[attr\|="value"] 选择器会选择attr属性值等于value或以value-开头的所有元素	.demo a[lang^="zh"]{background:gray;color:yellow;}

七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"] 等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

（11）伪类选择器