一、CSS1&2元素选择器

选择符            类型             版本 简介
*                       通配选择符         CSS2 所有元素对象。
E                     类型(HTML)选择符 CSS1 以文档语言对象类型作为选择符。
E#myid          id选择符         CSS1 以唯一标识符id属性等于myid的E对象作为选择符。
E.myclass     class选择符         CSS1 以class属性包含myclass的E对象作为选择符。
备注:E 是Element的缩写，表示元素的意思
 

二、CSS1&2关系选择器

选择符   类型             版本 简介
E F       包含选择符     CSS1 选择所有被E元素包含的F元素。
E>F       子选择符         CSS2 选择所有作为E元素的子元素F。
E+F       相邻选择符     CSS2 选择紧贴在E元素之后F元素。
 

三、CSS1&2伪类选择器

选择符      类型               简介
E:link         链接伪类选择器     设置超链接a在未被访问前的样式。
E:visited    链接伪类选择器     设置超链接a在其链接地址已被访问过时的样式。
E:hover     用户操作伪类选择器 设置元素在其鼠标悬停时的样式。
E:active    用户操作伪类选择器 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus    用户操作伪类选择器 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
E:lang()   :lang()伪类选择器     匹配使用特殊语言的E元素。
 

四、CSS1&2属性选择器

选择符           类型     简介
E[att]              CSS2    选择具有att属性的E元素。
E[att="val"]    CSS2    选择具有att属性且属性值等于val的E元素。
E[att~="val"]  CSS2    选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att|="val"]   CSS2    选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
 

五、CSS1&2伪对象选择器

选择符              类型       简介
E:first-letter    CSS1     设置对象内的第一个字符的样式。
E:first-line      CSS1     设置对象内的第一行的样式。
E:before         CSS2     设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after            CSS2      设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

 

 

CSS3新增选择器类型

 

一、关系选择器

选择符   名称         版本 简介
E F       包含选择符 CSS1 选择所有被E元素包含的F元素。
E>F       子选择符     CSS2 选择所有作为E元素的子元素F。
E+F       相邻选择符 CSS2 选择紧贴在E元素之后F元素。
E~F       兄弟选择符 CSS3 选择E元素所有兄弟元素F。

二、结构伪类选择器

E:root CSS3 匹配E元素在文档的根元素。
备注：
主要用于选择html根元素，只能用html:root{} 这样用。
 
E:first-child CSS2 匹配父元素的第一个子元素E。
E:last-child CSS3 匹配父元素的最后一个子元素E。
 
E:only-child CSS3 匹配父元素仅有的一个子元素E。
备注：
父元素仅有一个子元素时，该子元素的样式
 
E:nth-child(n) CSS3 匹配父元素的第n个子元素E。
 
备注：
E:nth-child(even)  选择偶数列表的样式
E:nth-child(odd)  选择奇数列表的样式
E:nth-child(3n+1)  选中自定义序列 
 
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
备注：
和上面的一样，唯一不同的是，这是倒序。
 
E:first-of-type CSS3 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type CSS3 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type CSS3 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) CSS3 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) CSS3 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty CSS3 匹配没有任何子元素（包括text节点）的元素E。
 

三、UI元素状态伪类选择器

 
1、下面的标签主要用于form表单中
 
选择符 版本 简介
 
E:checked CSS3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)（form中的单选或多选，被选中状态）实例如下：
<style>
Input:checked{ width=20px; height=20px;}
Input:checked+span{background:red;}  //该样式，当input被选中时，相邻的span的样式
</style>
<li><input  type=”radio”  name=”sex” value=”1”  checked><span>红色</span></li>
 
E:enabled     CSS3 匹配用户界面上处于可用状态的元素E。（form允许修改），input的默认属性就是enabled
 
E:disabled CSS3 匹配用户界面上处于禁用状态的元素E。（form不允许修改），事例如下：
<style>
Input:disabled{background:red; color:white;}
</style>
<input name=”id”  value=”99”  type=”text”  disabled>
 

四、属性选择器

选择符      版本 简介
E[att]       CSS2 选择具有att属性的E元素。
实例：
<style>
P[width]{background:red;}             //当p有宽度width属性时，背景色为红色
P[id]{background:yellow;}             //当p有id属性时，背景为黄色
P[id=”green”]{background:green;}       //当p的id值等于green时，该p的背景为绿色
P[class~=”yellow”]{background:green;}   //当p的class值中有空格隔开的yellow时，样式为黄色
P[class|=”a”]{background:blue;}         //当p的class值以a开头并且有横线时，样式为蓝色
 
a[href^=”http://”]{ color:red;}       //当a的href以http://开头时，该样式为color:red
a[href$=”rar”]{background:pink;}    //当a的href以rar结尾时，背景色为pink
a[href$=”rar”]:after{content:url(images/rar.jpg);}  //当a以rar结尾的链接后添加rar.jpg图片
a[href*=”o”]{ color:red;}     //当a的href中有o字符的，就设置样式
</style>
 
<p width=”200”>测试一下</p>   
<p id=”abc”>小红</p>   
<p id=”green”>小绿</p> 
<p class=”fl  green”>中间有空格的样式</p> 
<p class=”a-b”>中间有横线隔开的样式</p>   
<hr />
<a href=”http://www.baidu.com”>测试以http://开头的选择样式</a>
<a href=”down.rar”>测试以rar结尾的超链接样式的选择，并在链接后面添加图标</a>
 
 
 
 
E[att="val"]  CSS2 选择具有att属性且属性值等于val的E元素。
E[att~="val"]  CSS2 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"]  CSS3 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]  CSS3 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]  CSS3 选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"]  CSS2 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
 
 
 

五、伪对象选择器

选择符                 版本 简介
E:first-letter/E::first-letter  CSS3 设置对象内的第一个字符的样式。
E:first-line/E::first-line     CSS3 设置对象内的第一行的样式。
E:before/E::before         CSS3 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after           CSS3 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::selection             CSS3 设置对象被选择时的颜色。
 
实例：
<style>
P::first-line{color:red;}     //p的第一行样式
P::first-letter{color:green;}   //p的第一个字
a::before{content:”我是前门”}
a::after{content:”我是后门”}
span::selection{background:yellow;}
</style>
<p>
春晓——孟浩然<br />
春眠不觉晓，<br />
处处闻啼鸟，<br />
夜来风雨声，<br />
花落知多少。<br />
</p>
<hr />
<a href=””>点击下载</a>
<hr />
<span>测试普通文字被选中后的颜色，用E::selection控制</span>