2.2 上下文选择符

下面，我们就来解决上一节提到的那个问题：你想给article和aside中的段落文本分别设置不同的字号。像这种“基于位置”变换某个标签样式的问题，可以用上下文选择符来解决，本节我们就来讲一讲这种选择符。

上下文选择符的格式如下：

  1. 标签1 标签2 {声明}

其中，标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。

上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。

  1. article p {font-weight:bold;}

这个例子中的上下文选择符表明，只有是article后代的p元素才会应用后面的样式。换句话说，上面这条规则的目标是位于article上下文中的p元素。

可以通过下面这段代码来更深入地理解上下文选择符的含义。

  1. <body>
  2.     <article>
  3.         <h1>Contextual selectors are <em>very</em> selective</h1>
  4.         <p>This example shows how to target a <em>specific</em> tag.</p> 
  5.     </article>
  6.     <aside>
  7.         <p>Contextual selectors are <em>very</em> useful!</p>
  8.     </aside>  
  9. </body>

以上标记在没有应用CSS的情况下，如图2-3所示。

enter image description here图2-3 浏览器默认样式下的标记

以上标记创建的DOM（文档对象模型）结构如图2-4所示。

enter image description here图2-4 标记对应的DOM层次结构

图2-5展示了这个DOM结构对应的页面中盒子的嵌套关系。

enter image description here图2-5 每一层结构都是一个包含子元素的盒子

图中盒子的轮廓是通过在Firefox的Web Developer工具条中选择Outline Block Level Elements和Outline Custom Elements（可以在弹出的窗口中输入行内元素的名字）生成的。

在接下来我向大家展示那些瞄准标记中特定元素的CSS规则时，建议大家参照图2-4的DOM结构图。

我们就从最简单的一个标签的选择符开始。

  1. em {color:green;}

这条规则选择页面中所有em元素，因此三个em元素中的文本都会变成绿色，如图2-6所示（图中为浅灰色）。

enter image description here图2-6 一个简单的单标签规则为所有em元素应用了绿色

接下来修改这个上下文选择符，让它选择页面中特定区域中的标签。

  1. p em {color:green;}

万万牢记，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符，不要弄混。

现在，前面的p元素是上下文，后面的em元素是要选择的目标。这里选择符的意思用白话说，就是：“选择以p元素为祖先的所有em元素。”好好，看看图2-4中的结构图，哪些标签会被这条规则选中？

没错，你说得对，会选中两个段落中的em，而不会选中标题中的em。因为标题中的em并没有作为祖先的段落，因此这条规则对它不适用（参见图2-7）。

enter image description here图2-7 在以段落作为上下文的情况下，这条规则没有影响标题中的em

图2-8进一步展示了单上下文选择符的可能性。下面的CSS规则

  1. article em {color:green;}

会得到下面的结果

enter image description here图2-8 在以article作为上下文的情况下，aside元素中的em没有受到影响

这次，我们使用了article作为上下文，因此该元素中标题及段落下的em都变成了绿色（图中是浅灰色）。而位于aside中的em未受影响，因为它没有article这么个祖先元素。注意，至于article与em之间还隔着一个p元素（或h1元素），都不影响结果。只要em在整个层次结构中有一个叫article的祖先元素就可以了。

要是我只想选择标题中的em呢？那就需要更加具体的上下文。

  1. article h1 em {color:green;}

这里选择符的意思就是说：“选中的em必须有一个祖先是h1，后者进而还要有一个祖先是article。”

enter image description here图2-9 双上下文选择符可以选中更具体的标签

如图2-9所示，为了选择某个非常具体的标签，有时候不得不串起一串上下文选择符。