深入CSS选择器

当我们列出一系列样式规则之后，还要告诉浏览器将这些规则运用到哪些元素（document element），这是通过选择器（selector）来实现的。顾名思义，选择器就是用来选择样式规则在哪些元素起作用。举一个最简单的例子：

h1, h2 { font-size：20px ; }

这个例子中的h1 和 h2 就被成为选择器。那么，根据不同的选择基准，我将选择器分为以下4大类：

• 基于元素（标签）的选择器 （如 p , h2 , ul )
• 基于元素（标签）属性的选择器 （如 p.className , #id1)
• 基于文档结构的选择器 （如 body p em , div > p)
• 伪类、伪元素选择器（如 a: hover , body : after)

下面逐一介绍这四种选择器，并给出相应的例子：

1. 基于元素（标签）的选择器：

在html文档中，有许多不同的元素，有些具有明显的语言(如<p> <h1>),这些元素符合html最初的“结构化（structural）”原则。有些则不是（如<font> <strong>)，这些标签是为“表现（presentation）”服务的，从表面上你是看不出标签包含的具体内容（段落还是标题还是表格？）的。在XHTML规范中，已经去掉了非“结构”的标签。对于符合“结构化”的标签，可以直接将它们作为选择器，很容易理解。举个例子：

p ， h6 {font-weight: bold; color：red；}

将这天样式规则关联到文档之后，页面中的段落和小标题h6将显示为粗体，红色。可以讲多个选择器组合成一组，并将多个样式规则应用于该组合。有个特殊的选择器“ * ”它表示适用于所有的元素（标签）。例如：

* { font-family：Tahoma, Geneva, sans-serif; }

将整个页面的字体的设置为统一的字体族。

2. 基于标签属性的选择器：

对于每一个html标签，都有一系列属性来控制该标签，那么根据这些属性的有无、属性的值，我们提出第二种选择器：基于标签属性的选择器，这个类型又可以细分为以下几个类型：

2.1 类型选择器（class）：

根据标签的class属性来决定样式规则适用于哪些标签。例如，在html文档中有如下代码片段：

<div class="slidebar"> ....</div>

为了设置这个标签的样式属性，可以这么来定义：

div.slidebar { color: blue; background: gray; }

这行代码表示“class属性值为slidebar”的div标签字体为红色，背景为灰色。如果不局限与div标签，可以改成下面这样：

*.slidebar { ..... }

或者更直接一些：

.slidebar { .... }

一样的，可以为多个类型同时设置样式规则，类型之间用逗号隔开：

p.slidebar , h.myclass { ..... }

更复杂一些的情况是当class属性具有多个值得时候，一样可以实现：例如，要将class属性有两个值：class1，class2的段落（具体代码为：<p class="class1 class2",中间用空白符隔开）设置成黄色背景，可以如下定义：

p.class1.class2 {background：yellow；}

2.2 ID选择器：

跟class选择器类似的，根据标签的id属性，也可以设置该标签内容的样式规则，例如：

#myid { border: 1px solid red; }

这行代码将id为myid的标签设置了宽度为1px的实线红色边框。如果只想将这个样式应用于段落标签或者div标签，可以分别作如下修改：

p#myid {.... }

div#myid {...}

需要说明的是，按照规范，同一文档中不能存在相同的id属性值，所以也不能有类似这样的选择器p#id1#id2.

2.3 属性选择器：

除了class和id两个特殊的属性之外，标签还可以有其他许多属性，根据这些属性，引出了一般的属性选择器，结合实际代码，介绍几种比较常用的选择器：

（1）根据属性有无：

h1[class] {color:silver; }

如果h1标签定义了class属性，将其颜色设置为银色。当然，可以同时要求多个属性存在：

h1[class][title] { ...}

也可以不局限于标题标签，如下所示：

* [class][title] {...}

（2）根据属性值来：

h1[class="myclass"] {color:red;}

如果h1定义了class属性，并且值为myclass，将字体设置为红色。

同样可以拓展：

* [class="myclass"][title="mytitle"] {...}

（3）其他：

p[class~="class1"] {....} 如果class属性值中含有class1关键字，应用该规则。

p[class^="beg"] {...} 如果class属性值以”beg“开头，应用该规则。

p[class$="end"] {...} 。。。。。。。。以”end“结尾，应用。

p[src*="figure"] {...} 如果src属性值含有figure字符串，应用该规则，注意和class~="class1"区别。

p[lang|="en"] {color:white;} 如果语言为”en“或者以”en-“开头，应用该样式规则。

3. 基于文档结构的选择器：

文档结构，就是指文档中标签与标签之间的嵌套、并列等其他关系。根据标签之间的关系，来确定样式规则应用于哪些元素。

首先理解两种关系：parent-child 和ancestor-descendant。

前者是指具有直接的”父子“关系的的两个标签，例如：

<div>

<p>....</p>

</div>

我们说<div>和<p>具有parent-child关系。

而后者可以具有直接的”父子“关系，也可以是”爷孙“、”爷爷孙“...关系，例如：

<div>

<p>...<a>www.google.com</a>.</p>

</div>

此时我们说<div>与<p>、<p>与<a>之间具有parent-child关系。而<div>与<a>之间具有 ancestor-descendant关系。

Ok，理解这两个概念之后我们来看选择器

3.1 ancestor-descendant关系：

如果标签之间具有ancestor-descendant关系，以上面的代码为例，如果我只想把<div>标签中的段落设置成红色，而不在<div>之内的段落正常显示，那么可以这么来定义：

div p { color:red; }

注意div与p之间是空白符而不是逗号（逗号分隔是并列关系）。同样的，如果我想为class属性值为myclass的标签之内的所有段落设置样式，可以做如下处理：

.myclass p {.....}

id属性也是一样的道理，不再赘述。

3.2 parent-child关系：

先看下面代码：

<div class="out">

<div class="inner">

</div>

<p>...<a class="inner">www.google.com</a>.</p>

</div>

注意到第二个div标签的class值与<a>的属性值都是inner.现在我想把跟class值为out的div标签具有parent-child关系，并且class属性值为inner的标签颜色设置为白色，具体代码如下：

.out > .inner {color:white; }

此时，第二个div字体为白色，而<a>标签的class属性值虽然也是inner,但是其字体颜色不改变，仍为正常颜色。

3.3adjacent（比邻）关系：

如果我们想为紧跟在h1标题之后的段落上方留出更大的空白，CSS代码如下：

h1 + p { margin-top: 20px;}

4. 伪类和伪元素选择符：

之所以说”伪“，是因为我们在CSS中定义这个的选择符之后，浏览器在解析时会自己生成一个”伪“的类型或者元素，但是不再代码中显示。例如，我们定义一个伪类：

p:first-child {color:red;}

在html代码中：<p>...<em>...</em>...</p>.浏览器在解析这段代码的时候，会把它当做如下代码处理:

<p>...<em class="first-child">...</em>...</p>

4.1 伪类：

伪类常用于超链接标签<a>中，当然也可以用于其他标签，例如输入框<input>等。伪类主要有以下几种类型：

：link（正常情况，即未访问时的状态）

：visited （被访问过后的状态）

：active（按下鼠标时的状态）

：hover（鼠标放在其上的状态）

：focus（获得输入焦点时的状态）

：first-child（第一个子元素的样式定义）

：lang （） (特定语言环境时的样式）

举个例子，例如在导航栏菜单中，鼠标放在上面时，经常或改变背景颜色，可以这么设置：

a.menu : hover {background: red;}

此时，class属性名为menu的菜单在鼠标放置上方时，背景就会变成红色，提醒访问者。

也可以将不同的伪类结合起来，比如：

a:visited:hover {background:green;}

当把鼠标放在已经访问过的超链接时，背景为绿色。

4.2 伪元素：

跟伪类相类似，常用伪元素有以下几种：

:first-letter (第一个字母、汉字等)

:first-line（第一行）

:before （标签内容之前）

:after（标签内容之后）

例如：

body:after {cotent: end; color:blue;}

在页面结束后，会自动加上红色的end字样。

终于写完了，以上分类标准可能不是很恰当，也许存在不少错误，欢迎各位看官指出。