Combinators

关系选择器

后代选择器

The descendant combinator — typically represented by a single space (" ") 后代选择器——典型用单个空格（" "）字符 例如：

.box p {
    color: red;
} 

只会匹配处于带有.box类的元素里面的<p>元素。

子代关系选择器

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. 子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<article>的直接子元素的<p>元素：

下个示例中，我们弄了个有序列表，内嵌于另一个无序列表里面。我用子代关系选择器，只选中为<ul>的直接子元素的<li>元素，给了它们一个顶端边框。

如果你移去指定子代选择器的>的话，你最后得到的是后代选择器，所有的<li>会有个红色的边框。

ul > li {
    border-top: 5px solid red;
}  
    

<ul>
    <li>Unordered item</li>
    <li>Unordered item
        <ol>
            <li>Item 1</li>
            <li>Item 2</li>
        </ol>
    </li>
</ul>

参考：关系选择器 - 学习 Web 开发 | MDN (mozilla.org)

邻接兄弟

Adjacent sibling combinator 邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素： p + img 常见的使用场景是，改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨<h1>的段，然后样式化它。

h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}   

<article>
    <h1>A heading</h1>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
    

如果你往<h1>和<p>之间插入其他的某个元素，例如<h2>，那么就不生效了。

通用兄弟

General sibling combinator 如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的<p>元素后_任何地方_的<img>元素，我们会这样做： p ~ img 在下面的示例中，我们选中了所有的 <h1>之后的<p>元素，虽然文档中还有个 <div>，其后的<p>还是被选中了。

h1 ~ p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}

<article>
    <h1>A heading</h1>
    <p>I am a paragraph.</p>
    <div>I am a div</div>
    <p>I am another paragraph.</p>
</article>