CSS选择符小讲（2）

相邻选择符(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属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1。
　　4. 选择具有attr属性且属性值为一用连字符分隔的字词列表，由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）的第一个子对象（Selector2）的样式表属性。
　　7. 设置页面容器第一页使用的样式表属性。仅用于@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="https://www.aspxhome.com/">asp之家</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. 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。
　　2. 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。
　　3. 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。
　　4. 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

　　这几个伪对象选择符都为属于CSS2选择符，其中:first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。

　　实例：
　　div:first-letter {color:#f00;}
　　<div>我是一只丑小鸭，伊啊伊啊哟</div>

　　div:first-line {color:#f00;}
　　<div>我是一只丑小鸭，伊啊伊啊哟</div>

　　div:before {content:"web";}
　　<div>前端开发</div>

　　div:after {content:"...";}
　　<div>大段的文字</div>
 

待修改完善。。。