细说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 的时候注意其限制。（在此不细说）