CSS相邻同胞选择器

相邻同胞选择器

相邻同胞选择器（E + F），选择紧跟在某个元素的后面，且具有相同父亲的元素。换句话说，E和F是同辈元素，F紧跟在E元素后面，即它们之间没有其他同胞元素。相邻同胞选择器中，+ 两侧的空白符是可选的。

如，一些博客站，博文标题后面的第一段是博文的摘要。HTML代码如下：

<article>
     <h1>相邻同胞选择器</h1>
     <p>相邻同胞选择器，为同一个父元素下某个元素之后的第一个兄弟…</p>
     <p>例如，一些博客站，博文标题后面的第一段是博文的摘要。如果希望摘要…</p>
</article>

上述代码中，第一个 p 元素是 h1 元素相邻同胞元素。为了突显摘要，就可以使用相邻同胞选择器为摘要应用特殊样式，如让摘要显示为绿色、楷体，并且有1px的灰色虚线框：

h1 + p {
    color: green;
    font-family: KaiTi_GB2312;
    border: 1px dashed #333;
}

运行结果如图 2‑5 所示：

图2-5  CSS相邻同胞选择器