CSS基础学习八：派生选择器_html/css_WEB-ITnose

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

        在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors)，这是由于它们依赖于

上下文关系来应用或者避免某项规则。在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都

是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以

使HTML代码变得更加整洁。

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

器：

<span style="font-size:18px;">li strong {    font-style: italic;    font-weight: normal;  }</span>

        请注意标记为的代码的上下文关系：

<span style="font-size:18px;"><p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol></span>

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

码更加简洁。

       我们可以看以运行的结果为：

       接下来我们来看看常见的派生选择器。

       一后代(包含)选择器

       后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。选择某元素后代的元素，并设置一

些样式。

       (1)根据上下文选择元素

       我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作

用。上述的例子就是一个标准的后代选择器的演示。

       (2)语法解释

       在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合

符。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左

读选择器。语法：选择器 选择器 [选择器...] {}。有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔

可以是无限的。

       比如：h1 span{ }  span嵌套在h1中

<span style="font-size:18px;"><span style="font-size:18px;"><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title></span></span>