细说CSS选择器
众所周知，CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则。每个规则都有两个基本部分：选择器（selector）和声明块（declaration block）。下图显示了规则的各个部分。
声明块：由一个或多个声明组成，每个声明都是一个属性-值对（property-value）。
选择器：定义了将影响文档中的哪些部分。
下面全面的总结一下CSS的各类选择器:
元素选择器：
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如 p、h3、em、a ，甚至可以是html本身。
p { text-align:center; }
td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif;
color:red;
} ------结合选择器和声明的分组，这里不详细解释
元素选择器里面有一个特别的选择器 ------ 通配选择器
通配选择器显示为一个星号（*）。这个选择器可以与任何元素匹配，就像一个通配符。例如，想要一个文档中的每一个元素都为红色，可以写为以下规则：
* { color:red; }
注意：慎用 * ，尽管它使用很方便，但是会有一些意想不到的效果。
类选择器 ：
类选择器允许以一种独立于文档元素的方式来指定样式，它可以单独使用，也可以与其他元素结合使用。
要将类选择器的样式与元素关联，必须将 class 指定为一个适当的值，然后通过一个点号（.）向这些元素应用样式。
<p class="important warning">
This paragraph is a very important warning.
</p>
.warning { font-style:italic;} //类选择器添加样式
p.warning { font-style:italic;} //类选择器结合元素选择器添加样式
.important.warning { font-style:italic; } //多类选择器添加样式：通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
id选择器：
id选择器允许以一种独立于文档元素的方式来指定样式，它可以单独使用，也可以与其他元素结合使用。
要将id选择器的样式与元素关联，必须将 id 指定为一个适当的值，然后通过一个棋盘号（#）向这些元素应用样式。
<p id="intro">This is a paragraph of introduction.</p>
#intro {font-weight:bold;} //使用id选择器添加样式使字体变粗
类选择器和id选择器的区别：
区别 1：在一个HTML文档中，id选择器会使用一次，而且仅一次；而类选择器可以使用多次。
区别 2：可以使用类选择词列表方法为一个元素同时设置多个样式；但是不能使用 id词列表。--------表现在id选择器不能结合使用，而类选择器可以结合使用。
区别 3：id能包含更多含义。
注意: 在HTML 和 XHTML 文档中，类选择器和id选择器是区分大小写的。
属性选择器：
属性选择器可以根据元素的属性及属性值来选择元素。属性选择器分为以下4种类型：
1）.简单属性选择器：
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
a[href] {color:red;} //将有 href 属性的 HTML 超链接的文本设置为红色(根据单个属性进行选择)
a[href][title] {color:red;} //将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色（根据多个属性进行选择）
2）.根据具体属性值选择:
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} //单个属性-值选择器选择一个文档
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} //多个属性-值选择器链接在一起来选择一个文档
注意：这种格式要求必须与属性值完全匹配！
<p class="important warning">
This paragraph is a very important warning.
</p>
p[class="important"]{color: red;} //该样式无法应用
p[class="important warning"]{color: red;} //该样式可以应用（完全匹配）
3）.根据部分属性值选择：
如果属性能接受词列表（词与词用空格分隔），可以根据其中的任意一个词语进行选择，此时需要使用波浪号（~）。
<p class="important warning">
This paragraph is a very important warning.
</p>
p[class~="warning"] { font-style:italic;} //根据部分属性值添加样式
p.warning { font-style:italic;} //类选择器添加样式
以上两个语句是等效的，即实现的效果一模一样。思考：
（1）那为什么还要有这种“~=”属性选择器呢？
因为“~=”属性选择器能用于任何属性，而不只是class。
（2）如果忽略了波浪号（~），会怎么样？
如果忽略了波浪号（~），则与上面的“根据具体属性值选择”等同，但是一定需要完成完全匹配。
“部分值属性选择器”中的“子串匹配属性选择器”简介：(任何属性都可以使用这些选择器)
4）.特定属性选择类型：
最后一类属性选择器即特定属性选择器，这个属性选择器不太好介绍，不过可以通过例子来说明。
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="cy-en">Jrooana!</p>
*[lang|="en"] {color: red;} //选择 lang 属性等于 en 或以 en- 开头的所有元素
结果：前三个元素将被选中，则可应用样式，最后一个元素不能应用样式。
后代（上下文）选择器：（ 在 CSS2 中，它们称为派生选择器 ）
后代选择器对于有“祖先-后代”关系（父子关系是祖先-后代关系的特例）的元素而言。
在后代选择器中，规则左边的选择器一端的两个或多个选择器之间用空格结合符连接。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
p em { color:red; } //把作为 p 元素后代的 em 元素的文本变为 红色
提示：两个元素之间的层次间隔可以是无限的。（易被忽略）
子元素选择器：
子元素选择器对于“父子”关系的元素而言。即在你如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素（直接相连），请使用子元素选择器（Child selector）。
在子元素选择器中，规则左边的选择器一端用子结合符（即大于号：>）连接。
h1 > strong {color:red;} //把作为 h1 元素子元素的 strong 元素变成红色
提示：子选择符两边可以有空白符，可以没有，这是可选的。
相邻兄弟选择器：
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
在相邻兄弟选择器中，规则左边的选择器一端用相邻兄弟结合符（即加号：+）连接。
h1 + p {margin-top:50px;} //增加紧接在 h1 元素后出现的段落的上边距
提示：用一个结合符只能选择两个相邻兄弟中的第二个元素。
li + li {font-weight:bold;} //会把列表中的第二个和第三个列表项变为粗体,第一个列表项不受影响。(假设列表是三项)
伪类选择器和伪元素选择器：
利用伪类选择器和伪元素选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指定的幻像类指定样式。
冒号（：）是伪类和为元素的“名片”，所有伪类和伪元素关键字前面都有一个冒号。
伪类选择器：
1.伪类简介：
2.提示：伪类顺序一般为“link-visited-focus-hover-active”。
3.常见误区： p:first-child之类的选择器被认为是选择p元素的第一个子元素。记住伪类的实质，它是把某种幻像类关联到与伪类相关的元素，是一种自身关联。
p:first-child正确理解：选择作为某元素第一个子元素的所有p元素
伪元素选择器：
1.伪类简介：
2.提示：使用 :first-letter 和 :first-line 的时候注意其限制。（在此不细说）
