一、通配符选择器:
用于匹配任意元素或某元素下的所有元素。
示例:
* { margin: 0; padding: 0; }
兼容性:所有浏览器均支持。
二、ID选择器:
用于匹配含有制定id的元素。使用ID选择器之前需要在HTML元素上定义ID名。
示例:
#left_nav { margin: 5px 0px 0px 20px; float: left; overflow: hidden; }
兼容性:所有浏览器均支持。
三、类选择器:
用于匹配含有制定class的元素。使用类选择器之前需要在HTML元素上定义类名。
示例:
.mbtn { cursor: pointer; }
兼容性:所有浏览器均支持,但IE6不能支持多类选择器(.className1.className2)。
四、元素选择器:
用于匹配文档的元素。
示例:
ul { padding: 0; margin: 0; }
兼容性:所有浏览器均支持。
五、群组选择器:
将具有相同样式的选择器分组在一起使用相同的样式,各选择器之间以逗号相隔。
示例:
html, body { width: 100%; background-color: #5e5f60; min-width: 800px; height: 100%; min-height: 600px; }
兼容性:所有浏览器均支持。
六、后代选择器:
选取制定元素的后代元素。
示例:
ul li{ font-size: 12px; }
兼容性:所有浏览器均支持。
七、子元素选择器:
选取制定元素的子元素。
示例:
ul > li { color: yellow; }
以上示例表示选择ul元素下的li子元素,并设置color为黄色。
兼容性:IE6不能支持该选择器。
八、相邻元素选择器:
该选择器用于匹配指定元素之后的所有同级元素。
示例:
p + p { color: yellow; }
兼容性:IE6不能支持该选择器。
九、属性选择器:
该选择器可基于属性来定位元素。有以下一些属性选择器:
1.[attr]:匹配所有包含attr属性的元素;
2.[attr=value]:匹配所有包含attr属性且值为value的元素;
3.[attr~=value]:匹配的元素包含attr属性,该属性的值必须是一系列用空格隔开的多个值且其中一个值为value;
4.[attr|=value]:匹配的元素包含attr属性且属性的值为value或以"value-"开头;
5.[attr^=value]:匹配的元素包含attr属性且值以value开头;
6.[attr$=value]:匹配的元素包含attr属性且值以value结尾;
7.[attr*=value]:匹配的元素包含attr属性且值包含value;
兼容性:IE6不能支持该选择器。
十、伪类:
:link伪类:用于链接且用户未访问过;
:visited伪类:用于链接且用户已经访问过;
:hover伪类:用于链接且用户将鼠标放置在上面;
:active伪类:用于链接且当用户点击时;
:focus伪类:用于链接且当该元素成为焦点时;
:first-child伪类:用于定位指定元素的第一个子元素;
:lang(e)语言伪类:用于匹配lang属性为e的元素。
兼容性:所有现代浏览器均支持,但IE6只允许:hover应用于a元素。
十一、伪元素:
:first-line:匹配元素的第一行;
:first-letter:匹配元素的第一个字母;
:before:用于在匹配元素的前面插入内容,示例:
h1:before { content:url(beep.wav); }
该示例将会在每个h1元素之前播放一段声音;
:after:用于在匹配元素的后面插入内容。
兼容性:IE7及以下版本不支持。
十一、CSS3结构伪类:
:nth-child(n):用于定位指定元素的第n个子元素,其中n从1开始;
:nth-last-child(n):与:nth-child(n)相似,只是从指定元素的最后一个子元素开始;
:nth-of-type:选取指定元素中的特定元素,示例如下:
p:nth-of-type(even) { color: blue; }
以上示例可以选取文本块偶数段。
:nth-last-of-type:与:nth-of-type类似;
:last-child:用于定位指定元素的最后一个子元素;
:first-of-type:选取指定元素下的第一个同类子元素;
:last-of-type:选取指定元素下的最后一个同类子元素;
:only-child:表示一个元素是它父级元素下的唯一子元素;
:only-of-type:表示一个元素是它父级元素下的唯一同类子元素;
:empty:用于匹配没有子元素的元素。
兼容性:IE8及以下版本均不能支持。
十二、CSS3 UI元素状态伪类:
:enabled:激活指定元素;
:disabled:禁用指定元素;
:checked:选中的元素(单选、复选框)。
兼容性:依然是IE8及以下版本不支持。
十三、CSS3否定选择器:
:not():用于选择不匹配该选择器的元素。
兼容性:IE8及以下版本不支持。