在选择器里可以使用 combinator，组合器表达元素的关系。

为了方便区分页面上这些元素，我们可以在它们上面添加一些类，在这个 #app 元素里包装的这个 div 元素的上面添加一个 class，名字是 post，表示内容。在这个 .post 元素里面，包装内容的 div 元素上面，添加一个类，名字是 content，然后在包装内容作者的这个包装上添加一个类，名字是 meta。

Descendant combinator

在样式表里，先试一下 Descendant combinator ，后代组合器，这个组合器用的空格。比如 #app 空格 div，这个选择器里用了后代组合器，就是这个空格，这个选择器的意思就是选中 #app 这个元素的所有的 div 类型的后代。写一段样式，padding 设置成 16 像素，margin 上下是 8 像素，左右是 0 。然后用 border 添加一个边框，1px solid black。

你会发现 #app 元素里的所有的 div 元素都用了边框还有边距的样式。因为这些 div 元素都是 #app 这个元素的后代。也就是 .post，.content 还有 .meta 这些元素都应用了刚才添加的样式，因为它们都是 #app 这个元素的 div 类型的后代。

Child combinator

Child combinator 是子组合器，它选中的是元素的直接的子元素。复制一段样式，选择器写成 #app > div，这个大于号就是子组合器用的符号。这个选择器的意思就是选中 #app 这个元素的直接的子元素，也就是第一个层级的后代元素。

现在页面上 .post 这个元素上应用了使用子组合器的选择器设计的样式，因为这个 .post 元素是 #app 元素的直接的子元素。

General sibling combinator

General sibling combinator，一般兄弟组合器，组合器用的符号是 ~，它选中的就是元素的兄弟们，比如我们要选中 h1 这个元素的兄弟们，样式的选择器可以写成 h1 ~ div，意思就是选中 h1 这个元素的兄弟们。

页面上的 .title 这个元素的类型是 h1，它的兄弟们，现在就只有一个 .content 元素。这个元素现在应用了样式，下面我们可以调整一下这个 .meta 元素的位置，让它跟 .content 元素在同一级别。保存一下，你会发现，现在 .content 还有 .meta 元素都应用了样式，因为它们都是 h1 元素的兄弟。

Adjacent sibling combinator

Adjacent sibling combinator，相邻兄弟组合器，组合器用的符号是 + 号，它选中的是跟元素相邻的兄弟。写一段样式，用 h1 + div 作为选择器。选择器里用的 + 号表示的就是相邻兄弟组合器，这个选择器选中的就是跟 h1 元素相邻的兄弟元素。也就是被选中的元素跟 h1 元素挨着，并且它们有同一个爸爸。

现在页面上 .content 这个元素应用了使用相邻兄弟组合器的选择器设计的样式。