派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在CSS2中，他们被称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。

比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
 font-style: italic;
 font-weight: normal;
 }

请注意标记为<strong>的红色代码的上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为strong元素位于li元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。

再看看下面的CSS规则：

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

下面是它施加影响的HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
 }

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
 }

#sidebar h2 {
 font-size: 1em;
 font-weight: normal;
 font-style: italic;
 margin: 0;
 line-height: 1.5;
 text-align: right;
 }

#sidebar {
 border: 1px dotted #000;
 padding: 10px;
 }

div#sidebar {
 border: 1px dotted #000;
 padding: 10px;
 }

在CSS中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有center类的HTML元素均为居中。

在下面的HTML代码中，h1和p元素都有center类。这意味着两者都将遵守".center"选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p> 

注意：不要使用数字起始类名！它无法在Mozilla或Firefox中起作用。

和id一样，class也可被用作派生选择器：

.fancy td {
 color: #f60;
 background: #666;
 }

在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为fancy的更大的元素可能是一个表格或者一个div）

元素也可以基于它们的类而被选择：

td.fancy {
 color: #f60;
 background: #666;
 }

在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。

<td class="fancy">

你可以将类fancy分配给任何一个表格元素任意多的次数。那些以fancy标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class为fancy的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元 素也不会这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。