Jquery从入门到精通：二、选择器 2、选择器（1）CSS选择器
1.准备知识：CSS选择器：（参考文档：CSS2.0帮助文档）
代码：
<body>
<div>
<p id="p1">足不出户订窗帘：<a href="http://www.gooddo.com/" target="_blank">www.gooddo.com</a></p>
<p>当客网：<a href="http://www.downke.cn/" target="_blank">www.downke.cn</a></p>
<p>网络图书馆：热点图书<a href="http://www.hotbook.cn/" target="_blank">www.hotbook.cn</a></p>
<div>足不出户订窗帘：<a href="http://www.gooddo.com/" target="_blank">www.gooddo.com</a></div>
<ul>
<li><p>www.downke.cn</p></li>
<li>www.gooddo.com</li>
<li>http://www.hotbook.cn</li>
</ul>
</div>
</body>
| Selectors 选择符 |
CSS Version 版本 |
Compatibility 兼容性 |
Syntax Samples 语法 |
Description 简介 |
|---|---|---|---|---|
| 类型选择符(Type Selectors) | CSS1 | IE4+ , NS4+ | E1 | 以文档语言对象类型作为选择符 |
| 通配选择符(Universal Selector) | CSS2 | NONE | * | 选定文档目录树（DOM）中的所有类型的单一对象 |
| 包含选择符(Descendant Selectors) | CSS1 | IE4+ , NS4+ | E1 E2 | 选择所有被E1包含的E2。即E1.contains(E2)==true |
| 子对象选择符(Child Selectors) | CSS2 | NONE | E1 > E2 | 选择所有作为E1子对象的E2 |
| 相邻选择符(Adjacent Sibling Selectors) | CSS2 | NONE | E1 + E2 | 选择紧贴在对象E1之后的所有E2对象 |
| 属性选择符(Attribute Selectors) | CSS2 | NONE | E1[attr] | 选择具有attr属性的E1 |
| 属性选择符(Attribute Selectors) | CSS2 | NONE | E1[attr=value] | 选择具有attr属性且属性值等于value的E1 |
| 属性选择符(Attribute Selectors) | CSS2 | NONE | E1[attr~=value] | 选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等于value的E1 |
| 属性选择符(Attribute Selectors) | CSS2 | NONE | E1[attr|=value] | 选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1 |
| ID选择符(ID Selectors) | CSS1 | IE4+ , NS4+ | #sID | 以文档目录树（DOM）中作为对象的唯一标识符的ID作为选择 |
| 类选择符(Class Selectors) | CSS1 | IE4+ , NS4+ | E1.className | 在HTML中可以使用此种选择符。其效果等同于E1[class~=className] |
| 选择符分组(Grouping) | CSS1 | IE4+ , NS4+ | E1,E2,E3 | 将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组 |
（1）* ：通用选择器－－表示匹配所有的元素。
*{ color:red;}表示页面上所有的文字颜色都为红色：
（2）div :类型选择器－－表示匹配所有的div元素(包括其内部的子元素）
div{ color:red;}:表示在上面的代码中的div及其内部的子元素的文本都为红色。
p{ color:red;}：表示上面代码中的<p>标签及其内部的子元素文本都为红色。而<div>足不出户订窗帘：<a href="http://www.gooddo.com/" target="_blank">www.gooddo.com</a></div>内的文本却不会改变。
（3）div>p：子选择器－－表示div的子类中的所有p标签。
如：div>p{ color:#FF0000;}，表示上面代码中的div的子类中的所有p标签，但是不包括：<li><p>www.downke.cn</p></li>，因为他是属于div孙子辈的标签。
（4）div p：后代选择器－－表示选取div中所有的p标签。
如：div p{ color:#FF0000;}，可以实现div中的所有p标签中文字都变成红色，包括：<li><p>www.downke.cn</p></li>，
（5）#p1：ID选择器－－选择id为p1的所有元素。
注：理论上，一个页面可以存在多个相同的ID，这对于一般的页面没有什么影响，但是对于脚本编程来说，是会报错的。所以如果想让一些元素具有相同的style的话，可以用class进行定义。也就是我们下面要提到的类选择器。
（6）.p1:类选择器－－选择类名为p1的所有元素
（7）属性选择符：
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。这里的value不能包含空格
4. 选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1
目前IE5.5+尚不支持此种选择符。
示例：
h[title] { color: blue; }
/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed="fast"][dorun="no"] { color: red; }
a[rel~="copyright"] { color:black; }
此外，CSS还有伪类和伪对象，这里不再做详细的解释，大家可以下载一份CSS2.0中文手册看看。
CSS Pseudo-Classes Reference 伪类
| Pseudo-Classes 伪类 |
CSS Version 版本 |
Compatibility 兼容性 |
Description 简介 |
|---|---|---|---|
| :link | CSS1 | IE4+ , NS4+ | 设置a对象在未被访问前的样式表属性 |
| :hover | CSS1/CSS2 | IE4+ , NS4+ | 设置对象在其鼠标悬停时的样式表属性 |
| :active | CSS1/CSS2 | IE4+ | 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性 |
| :visited | CSS1 | IE4+ , NS4+ | 设置a对象在其链接地址已被访问过时的样式表属性 |
| :focus | CSS2 | NONE | 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式表属性 |
| :first-child | CSS2 | NONE | 设置对象（Selector1）的第一个子对象（Selector2）的样式表属性 |
| :first | CSS2 | IE4+ | 设置页面容器第一页使用的样式表属性。仅用于@page规则 |
| :left | CSS2 | IE4+ | 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则 |
| :right | CSS2 | IE4+ | 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则 |
| :lang | CSS2 | NONE | 设置对象使用特殊语言的内容样式表属性 |
CSS Pseudo-Elements Reference 伪对象
| Pseudo-Elements 伪对象 |
CSS Version 版本 |
Compatibility 兼容性 |
Description 简介 |
|---|---|---|---|
| :first-letter | CSS2 | IE5.5+ | 设置对象内的第一个字符的样式表属性 |
| :first-line | CSS2 | IE5.5+ | 设置对象内的第一行的样式表属性 |
| :before | CSS2 | NONE | 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容 |
| :after | CSS2 | NONE | 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容 |
我们有了以上的CSS选择符、伪类、伪对象的知识积累，我们就可以随心所欲的使用强大的Jquery来选择我们所要的对象了。
例如：
$('div'):表示取得所有的div元素，并返回一个jquery对象。
我做了一个简单的选择器效果展示，应该下班了，没有时间了，做的比较糙，也不全，大家凑合看吧。
