CSS中的选择器规则非常重要，种类也比较多，而jquery中的元素选择器与之也非常类似，所以很有必要进行学习总结一番。
1.元素选择器：
例：选择所有p元素
p {background-color:gray}
以上p可以是任意的html元素名字，如body,h1,h2,div,span等。
2.选择器分组
例：选择所有p元素和h2元素
p,h2 {background-color:red}
3.类选择器
例：选择所有class='demo'的元素
.demo {background-color:gray}
4.类结合元素选择器
例：选择所有class='demo'的h1元素
h1.demo {background-color:red}
5.多类选择器
例：选择同时class标记为demo1,demo2的元素
.demo1.demo2{background-color:red}
6.ID选择器
例：选择ID=demo的元素
#demo {background-color:red}
这里需要注意的是：（1）ID在整个html文档中是唯一的，而class不唯一（2）类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。
7.属性选择器
（a)简单属性选择器
例：选择含有demo的属性的所有元素
*[demo] {color:red}
例：只选择有 href 属性的锚（a 元素）
a[href] {color:red}
例：选择同时有 href 和 title 属性的 HTML 超链接
a[href][title] {color:red}
(b)根据具体属性值选择
例：选出title是'demo1'，href是'#'的超链接
a[title='demo'][href='#'] {color:red}
需要注意的是title必须是'demo',不能多也不能少。
(c）根据部分属性值进行选择
例：选出title属性里包含'demo'的超链接，比如title本来是'demo1'
a[title~='demo'] {color:red}
需要注意的是省略了‘~’，将找出'title‘属性值只能是'demo'的超链接。
（d)字串匹配属性选择器
利用几个正则符号来表示如下：
[abc^="def"] 表示选择 abc 属性值以 "def" 开头的所有元素；
[abc$="def"] 表示选择 abc 属性值以 "def" 结尾的所有元素；
[abc*="def"] 表示选择 abc 属性值中包含子串 "def" 的所有元素；
（e)特定属性类型
例：选择 lang 属性等于 en 或以 en- 开头的所有元素
*[lang|="en"] {color: red;}
所以，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
8.后代选择器
h1 em {color:red;}
例：上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>
需要注意的是，后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的，例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
9.子元素选择器
如果希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。
例：把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响，因为第二个h1的子元素只有em，而strong是其孙子元素。
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong {color:red;}
10.相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例：如果要增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}
请看下面这个文档树片段：
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
li + li {font-weight:bold;}
因此，上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。
11.伪类
（a)锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
需要注意的是：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的。
（b）first-child类
例：给定以下规则
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的 p 元素(如果不是p元素就是没找到）设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的li 元素(如果不是i元素就是没找到）变成大写。
<div> <p>These are the necessary steps:</p> <--!>是<div>第一个元素，并且还是<p>元素。 <ul> <li>Intert Key</li> <--!>是<ul>第一个元素，并且还是<li>元素 <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div>
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
又例如：
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
首先p>i是p元素下的所有子元素i, 然后first-child，即图中加粗的部分。
再例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<h1>kdsk</h1>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
<div>
<p>some<i>text</i><span><i>test</i></span></p>
<p>some<i>text</i></p>
</div>
</body>
</html>
首先p:first-child是某元素第一个<p>元素,所有<body>下没找到，而<div>找到了，因为它第一个子元素就是p；然后再在该p元素下找出所有后代子元素i，即上面代码块中标蓝色的两个text。
12.伪元素
（a)：first-line
用于向文本的首行设置特殊样式，注意只能用于块级元素，下面的属性可应用于:first-line.
font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear
例：根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
（b) ：first-letter
用于向文本的首字母设置特殊样式，只能用于块级元素。下面属性可应用于:first-letter.
font color background margin padding border text-decoration vertical-align (仅当 float 为 none 时) text-transform line-height float clear
例：向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
（c)：before
可以在元素的内容前面插入新内容.
例：在每个 <h1> 元素前面插入一幅图片
h1:before
{
content:url(logo.gif);
}
(d):after
以在元素的内容之后插入新内容
例：在每个 <h1> 元素后面插入一幅图片
h1:after
{
content:url(logo.gif);
}