CSS3同胞选择器

同胞选择器（E～F），用于选择某元素后面的所有同胞元素。也就是说，E和F是同辈元素，且F在E元素的后面，它们之间可以有，也可以没有其他同胞元素。

如，在博客站中，博文标题后面的是正文，正文用段落组织。HTML 代码如下：

1. <article>
2.     <h1>同胞选择器</h1>
3.     <p>同胞选择器，为同一个父元素下某个元素之后所有的元素应用样式…</p>
4.     <p>例如，一篇文章中，可以使用同胞选择器，让一级标题后面的所有段落…</p>
5. </article>

上述代码中，所有的 p 元素都是 h1 元素的同胞元素。此时，就可以使用同胞选择器，让所有段落都首行缩进两个字符，并使用 1.5 倍行距。

1. h1 ~ p {
2.     text-indent: 2em;
3.     line-height: 1.5em;
4. }

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

图2-6 CSS同胞选择器

关于作者

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