1、元素选择器
元素选择器是最简单的选择器，其语法如下：
E{.....}/*E代表有效的HTML元素名，后面内容中的E都是代表元素名*/。
在定义css样式时，通常会使用通配符“*”来匹配HTML文档中的任意元素，不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器，取而代之的是，把所有需要统一设置的元素，放在一起，一块设置。
2、属性选择器
从广义角度来看，元素选择器其实是属性选择器的特例。属性选择器有以下几种语法格式。
- E{...}：指定该css样式对所有E元素起作用。
- E[attr]{...}：指定该css样式对具有attr属性的E元素起作用。
- E[attr=value]{...}：指定该css样式对所有包含attr属性且该属性值为value的E元素起作用。
- E[attr ~=value]{...}：指定该css样式对所有包含attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的E元素起作用。
- E[attr |=value]{...}：指定该css样式对所有包含attr属性，且attr属性的值为以连字符分隔得系列值，其中第一个值为value的Tag元素起作用。
- E[attr^="value"]{...}：指定该css样式对所有包含attr属性，且attr属性的值以value开头的字符串的E元素起作用。
- E[attr$="value"]{...}：指定该css样式对所有包含attr属性，且attr属性的值以value结尾的字符串的E元素起作用。
- E[attr*="value"]{...}：指定该css样式对所有包含attr属性，且attr属性的值为包含value的字符串的E元素起作用。
以上几个选择器匹配的规则越严格优先级越高，而且也并没有得到所有浏览器的广泛支持。使用示例如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 属性选择器 </title> <style type="text/css"> /* 对所有div元素都起作用的CSS样式 */ div { width:300px; height:30px; background-color:#eee; border:1px solid black; padding:10px; } /* 对有id属性的div元素起作用的CSS样式 */ div[id] { background-color:#aaa; } /* 对有id属性值包含xx的div元素起作用的CSS样式 */ div[id*=xx] { background-color:#999; } /* 对有id属性值以xx开头的div元素起作用的CSS样式 */ div[id^=xx] { background-color:#555; color:#fff; } /* 对有id属性值等于xx的div元素起作用的CSS样式 */ div[id=xx] { background-color:#111; color:#fff; } </style> </head> <body> <div>没有任何属性的div元素</div> <div id="a">带id属性的div元素</div> <div id="zzxx">id属性值包含xx子字符串的div元素</div> <div id="xxyy">id属性值以xx开头的div元素</div> <div id="xx">id属性值为xx的div元素</div> </body> </html>
其效果如下：
3、ID选择器
ID选择器指定css样式对具有指定id属性的HTML元素起作用，返回值为单个元素。语法格式为：#idValue{...}。
4、class选择器
语法格式为：[E].classValue{......}
5、包含选择器
语法格式为：Selector1 Selector2{......}/*其中Selector1 和Selector2都是有效的选择器*/
6、子选择器（>）
子选择器用于指定目标必须是某个选择器对应的元素的子元素。语法格式为：Selector1>Selector2{......}/*其中Selector1 和Selector2都是有效的选择器*/
包含选择器与子选择器有点相似，存在的区别为：对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是“孙子元素”也可以，但对于子选择器来说，要求是外部选择器对应的元素的直接子元素，即“儿子元素”。
7、兄弟选择器（~，也可以叫同辈元素选择器）
兄弟选择器是CSS3.0新增的一个选择器。语法格式为：Selector1~Selector2{......}。该选择器匹配与Selector1对应的元素后面、能匹配Selector2 的兄弟节点。
8、相邻元素选择器（+）
语法格式为：Selector1+Selector2{......}。选择紧邻Selector1元素之后的Selector2元素
9、选择器组合
语法格式为：Selector1,Selector2,Selector3{......}/*其中Selector1 、Selector2和Selector3都是有效的选择器*/
10、伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器，它只能对CSS中已有的伪元素起作用。CSS提供的伪元素选择器有以下几个。
- first-letter：该选择器对应的CSS样式对指定对象内的第一个字符起作用。（对块元素起作用）
- first-line：该选择器对应的CSS样式对指定对象内的第一行内容起作用。（对块元素起作用，只对第一行起作用，与换行方式无关）
- before：该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
- after：该选择器与内容相关的属性结合使用，用于在指定对象内部的尾部插入内容。
选择器的优先级
一般来说，选择器的优先级（从上往下依次降低）是：
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
- 作为style属性写在元素内的样式
- id选择器
- 类选择器
- 标签选择器（元素选择器）
- 通配符选择器