CSS选择符的用法_div+css教程_H5之家 - 中国HTML5教程资源分享第一站

CSS选择符(CSS Selectors - CSS1 and CSS2)
类型选择符(Type Selectors)　CSS1
包含选择符(Descendant Selectors)　CSS1
ID选择符(ID Selectors)　CSS1
类选择符(Class Selectors)　CSS1
分组选择符(Grouping Selectors)　CSS1
通配选择符(Universal Selectors)　CSS2
子选择符(Child Selectors)　CSS2
相邻选择符(Adjacent Selectors)　CSS2
属性选择符(Attribute Selectors)
E1[attr]　CSS2
E1[attr=value]　CSS2
E1[attr~=value]　CSS2
E1[attr|=value]　CSS2
伪类选择符(CSS Pseudo-Classes Reference)
:link　CSS1
:visited　CSS1
:hover　CSS1
:active　CSS1
:focus　CSS2
:first-child　CSS2
:first　CSS2
:left　CSS2
:right　CSS2
:lang　CSS2
伪对象选择符(CSS Pseudo-Elements Reference)
:first-letter　CSS2
:first-line　CSS2
:before　CSS2
:after　CSS2
　　现在已经将所有的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中作为对象的唯一标识符的ID作为选择符。目前所有主流浏览器均支持该选择符，属于CSS1选择符。

　　实例：
　　#test{color:#F00;}
　　<div id="test">这里是测试内容</div>

类选择符(Class Selectors)

　　语法：.className

　　说明：其效果等同于E1[class~=className]。可以为对象的class属性指定多于一个值(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属性且属性值为一用空格分隔的字词列表，其中一个等于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>