CSS相邻同胞选择器

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

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

2.      

   相邻同胞选择器

3.      

   相邻同胞选择器，为同一个父元素下某个元素之后的第一个兄弟…

4.      

   例如，一些博客站，博文标题后面的第一段是博文的摘要。如果希望摘要…

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

1. h1 + p {
2.     color: green;
3.     font-family: KaiTi_GB2312;
4.     border: 1px dashed #333;
5. }

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

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。