做这以前，自然得将全部CSS挑选符列出来先。
如今早已将全部的CSS挑选符都例举出来了，凑合对每一个挑选符做独立的解释和举例。针对下列的这些事例，一些只是简易的运用案例，一些还出示了比照事例，使得能够显著的看出该种挑选符的应用范畴和方式。
种类挑选符(Type Selectors)
英语的语法：E1
表明：有的情况下大家也将它叫做标识挑选符，由于它是立即用html标识来做挑选符开展实际操作。现阶段全部流行访问器均适用该挑选符，属于CSS1挑选符。
案例：
div{color:#F00;}
<div>这里是检测內容</div>
包括挑选符(Descendant Selectors)
英语的语法：E1 E2
表明：挑选全部被E1包括的E2，这里的E1和E2便可因此html标识，还可以是class或id。现阶段全部流行访问器均适用该挑选符，属于CSS1挑选符。
案例：
div em{color:#F00;}
.test em{color:#F00;}
<div>这里是<em>检测</em>內容</div>
<div class="test">这里是<em>检测</em>內容</div>
ID挑选符(ID Selectors)
英语的语法：#sID
表明：以DOM中做为目标的唯1标志符的ID做为挑选符。现阶段全部流行访问器均适用该挑选符，属于CSS1挑选符。
案例：
#test{color:#F00;}
<div id="test">这里是检测內容</div>
类挑选符(Class Selectors)
英语的语法：.className
表明：其实际效果等同于于E1[class~=className]。能够为目标的class特性特定多于1个值(className)，其方式是用空格将每一个className分隔。现阶段全部流行访问器均适用该挑选符，属于CSS1挑选符。
案例：
.test{color:#F00;}
.test2{font-size:14px;}
<div id="test">这里是检测內容</div>
<div id="test test2">这里是检测內容</div>
排序挑选符(Grouping Selectors)
英语的语法：E1,E2,E3
表明：将一样的界定运用于好几个挑选符，能够将挑选符以逗号隔开的方法并为组。现阶段全部流行访问器均适用该挑选符，属于CSS1挑选符。
案例：
.test,p{color:#F00;}
<div id="test">这里是检测內容</div>
<p>这里是检测內容</p>
通配挑选符(Universal Selectors)
英语的语法：*
表明：选定DOM中的全部目标。现阶段全部流行访问器均适用该挑选符，属于CSS2挑选符。
案例：
*{color:#F00;}
<div>这里是检测內容</div>
<p>这里是检测內容</p>
子挑选符(Child Selectors)
英语的语法：E1 > E2
表明：挑选全部做为E1子目标的E2，不包含孙辈和更深的关联。非IE核心访问器和IE7及以上访问器适用，属于CSS2挑选符。
案例：
.test > strong{color:#F00;}
<div class="test">
<strong>检测的內容</strong>
<p>这是<strong>检测的內容</strong>哦！</p>
<strong>检测的內容</strong>
</div>
邻近挑选符(Adjacent Selectors)
英语的语法：E1 + E2
表明：挑选紧跟在目标E1以后的全部E2目标(E1与E2需构造级別同样)。非IE核心访问器和IE7及以上访问器适用，属于CSS2挑选符。
案例：
p + p{color:#F00;}
<p>检测的內容1</p>
<p>检测的內容2</p>
<div>检测的內容3</div>
<p>检测的內容4</p>
<p>检测的內容5</p>
<div><p>检测的內容6</p></div>
特性挑选符(Attribute Selectors)
英语的语法：（特性挑选符实际再分成4种不一样的主要表现方法）
1.E1[attr]
2.E1[attr=value]
3.E1[attr~=value]
4.E1[attr|=value]
表明：
1. 挑选具备attr特性的E1
2. 挑选具备attr特性且特性值等于value的E1
3. 挑选具备attr特性且特性值为1用空格隔开的字词目录，在其中1个等于value的E1。
4. 挑选具备attr特性且特性值为1用连标识符隔开的字词目录，由value刚开始的E1
非IE核心访问器和IE7及以上访问器适用，属于CSS2挑选符。
案例：
div[title]{color:#f00;}
<div title="检测的內容">检测的內容</div>
div[class=a]{color:#f00;}
<div class="a">检测的內容</div>
<div class="a b">检测的內容</div>
div[class~=a]{color:#f00;}
<div class="a">检测的內容</div>
<div class="a b">检测的內容</div>
div[title|=a]{color:#f00;}
<div title="a">检测的內容</div>
<div title="a b c">检测的內容</div>
<div title="a-b-c">检测的內容</div>
伪类挑选符(CSS Pseudo-Classes Reference)
英语的语法：（伪类挑选符共有10种）
1. Selector:link{ sRules }
2. Selector:visited{ sRules }
3. Selector:hover{ sRules }
4. Selector:active{ sRules }
5. Selector:focus{ sRules }
6. Selector1 Selector2:first-child{ sRules }
7. Selector:first{ sRules }
8. Selector:left{ sRules }
9. Selector:right{ sRules }
10.Selector:lang{ sRules }
表明：
1. 设定a目标在未被浏览前的款式表特性。默认设置值由访问器决策。针对无href特性（特点）的a目标，此伪类不产生功效。
2. 设定a目标在其连接详细地址已被浏览落伍的款式表特性。默认设置值由访问器决策。界定网页页面到期時间或客户清空历史时间纪录将危害此伪类的功效。针对无href特性（特点）的a目标，此伪类不产生功效。
3. 设定目标在其电脑鼠标悬停时的款式表特性。在CSS1中此伪类仅能用于a目标。且针对无href特性（特点）的a目标，此伪类不产生功效。在CSS2中此伪类能够运用于任何目标。
4. 设定目标在被客户激活（在电脑鼠标点一下与释放出来之间产生的恶性事件）时的款式表特性。在CSS1中此伪类仅能用于a目标。且针对无href特性（特点）的a目标，此伪类不产生功效。在CSS2中此伪类能够运用于任何目标。而且:active情况能够和:link和:visited情况另外产生。
5. 设定目标在变成键入聚焦点（该目标的onfocus恶性事件产生）时的款式表特性。
6. 设定目标（Selector1）的第1个子目标（Selector2）的款式表特性。
7. 设定网页页面器皿第1页应用的款式表特性。仅用于@page标准。
8. 设定网页页面器皿坐落于装订线左侧的全部网页页面应用的款式表特性。仅用于@page标准。
9. 设定网页页面器皿坐落于装订线右侧的全部网页页面应用的款式表特性。仅用于@page标准。
10.设定目标应用独特語言的內容款式表特性。
:link, :visited, :hover, :active属于CSS1，现阶段全部流行访问器均适用a目标的该4种伪类挑选符，非IE访问器和IE7及以上访问器还适用非a目标的:hover, :active；:focus, :lang属于CSS2，非IE关键访问器及IE8适用。
案例：
a:link{color:#f00;}
a:visited{color:#666;}
a:hover{color:#F60;text-decoration:none;}
a:active{color:#000;}
<a href="http://blog.doyoe.com/">css探寻之旅</a>
input:focus,a:focus{background:#f00;/* 点一下或按TAB键得到聚焦点时起效 */}
<a href="http://blog.doyoe.com/">css探寻之旅</a>
<input type="text" />
div em:first-child{color:#f00;}
<div><em>web</em>前端开发开发设计<em>权威性指南</em></div>
伪目标挑选符(CSS Pseudo-Elements Reference)
英语的语法：（伪目标挑选符共有4种）
1. Selector:first-letter
2. Selector:first-line
3. Selector:before
4. Selector:after
表明：
1. 设定目标内的第1个标识符的款式表特性。此伪目标仅功效于块元素。内联元素要应用该伪目标，务必先设置目标具备块元素的表状。
2. 设定目标内的第1行的款式表特性。此伪目标仅功效于块目标。内联目标要应用该伪目标，务必先设置目标具备块元素的表状。
3. 用来和content特性1起应用，设定在目标前（根据目标树的逻辑性构造）产生的內容。
4. 用来和content特性1起应用，设定在目标后（根据目标树的逻辑性构造）产生的內容。
这几个伪目标挑选符都为属于CSS2挑选符，在其中:first-letter和:first-line现阶段全部流行访问器均适用；:before和:after非IE关键访问器及IE8适用。
案例：
div:first-letter {color:#f00;}
<div>我是1只丑小鸭，伊啊伊啊哟</div>
div:first-line {color:#f00;}
<div>我是1只丑小鸭，伊啊伊啊哟</div>
div:before {content:"web";}
<div>前端开发开发设计</div>
div:after {content:"...";}
<div>大段的文本</div>
待改动健全。。。