2.3 特殊的上下文选择符

刚才，我们学习的上下文选择符是以某个祖先标签作为上下文。只要有标签在它的层次结构“上游”存在这么一个祖先，那么就会选中该标签。无论从该标签到作为祖先的上下文之间隔着多少层次都没有关系。不过，有时候我们可能还会需要比“某些祖先”更加具体的上下文。比如说吧，要是你想根据父元素或者同胞元素的标签名来选择元素怎么办呢？

下面我们再用另一段标记来演示几种特殊的上下文选择符。

  1. <section>
  2.     <h2>An H2 Heading</h2>
  3.     <p>This is paragraph 1</p>
  4.     <p>Paragraph 2 has <a href="#">a link</a> in it.</p>
  5.     <a href="#">Link</a>
  6. </section>

2.3.1 子选择符>

  1. 标签1 > 标签2

标签2必须是标签1的子元素，或者反过来说，标签1必须是标签2的父元素。与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

  1. section > h2 {font-style:italic;}

图2-10展示了以上规则的结果。

enter image description here图2-10 h2是section的子元素，故而被选中

2.3.2 紧邻同胞选择符+

  1. 标签1 + 标签2

标签2必须紧跟在其同胞标签1的后面。

  1. h2 + p {font-variant:small-caps;}

图2-11展示了这条规则的效果。

enter image description here图2-11 第一个p由于是h2的紧邻同胞而被选中

2.3.3 一般同胞选择符~

  1. 标签1 ~ 标签2

标签2必须跟（不一定紧跟）在其同胞标签1后面。

用Shift+1键左侧的键输入字符～（波浪号）。

  1. h2 ~ a {color:red;}

图2-12展示了这条规则的效果。

enter image description here图2-12 只选中了同胞元素

2.3.4 通用选择符*

  1. * （按Shift+8）

通用选择符*（常被称为星号选择符）是一个通配符，它匹配任何元素，因此下面这条规则

  1. * {color:green;}

会导致所有元素（的文本和边框）都变成绿色。不过，一般在使用*选择符时，都会同时使用另一个选择符，比如：

color属性设定的是前景色。前景色既影响文本也影响边框，但人们通常只用它设定文本颜色。

  1. p * {color:red;}

这样只会把p包含的所有元素的文本变成红色。

这个选择符有一个非常有意思的用法，即用它构成非子选择符，比如：

  1. section * a {font-size:1.3em;}

如图2-13所示，任何是section孙子元素，而非子元素的a标签都会被选中。至于a的父元素是什么，没有关系。

enter image description here图2-13 只选中了孙子元素，并未选中子元素

总之，只有一个标签名的选择符会选中页面中所有相同标签的实例。而通过上下文选择符，则可以指定标签必须具备相应的祖先或同胞。