5.3.4 按上下文选择元素
在CSS中，可以根据元素的祖先元素、父元素或同胞元素来定位它们。祖先元素是包含目标元素的任何元素，不管它们之间隔了多少代。例如在下面的代码中，前两个段落的祖先元素是类名为about的article元素，后两个段落的祖先元素是类名为part3的section元素以及类名为about的article元素。
1.按祖先元素选择要格式化的元素
选择器写为：祖先元素希望格式化的元素
例如要设置类名为about的article元素中所有的段落均为斜体，article.about即祖先元素，希望格式化的元素为p，中间用空格隔开，如图5-25、图5-26所示。
图5-25 按祖先元素选择要格式化的元素
图5-26 显示结果
2.按父元素选择要格式化的元素
选择器写为：父元素＞希望格式化的元素
与按祖先元素选择方式不同的是，按父元素选择方式仅选择其子元素，而不会包括子子元素、子子子元素等。
例如article元素中有4个段落，其中前两段是article元素的子元素，后两段放置在section元素中，是article元素的子子元素。如果仅想设置前两段有下划线，则可以使用按父元素选择方式，如图5-27、图5-28所示。
图5-27 按父元素选择要格式化的元素
图5-28 显示结果
3.按相邻同胞元素选择要格式化的元素
同胞元素是拥有同一父元素的任何类型的子元素。相邻同胞元素是直接毗邻的同胞元素，即它们之间没有其他同胞元素。在这个例子中，h1和第一段是相邻同胞元素，h1和h2则不是相邻同胞元素。
选择器写为：相邻同胞元素＋目标元素
例如要设置第一段为红色，因为第一段和h1相邻，可以使用图5-29所示的代码，显示效果如图5-30所示。
图5-29 按相邻同胞元素选择要格式化的元素
图5-30 显示效果
注意：这里的相邻同胞元素应该是目标元素前的相邻同胞元素，例如要选择第二段来设置样式，选择器就不能写为h2＋p，这指的是h2后续的相邻同胞元素，即第三段。如果要选择第二段，选择器可以写为h1＋p＋p。