创建日期: 2020年4月13日
参考链接
准备工作：
如果你是新打开这篇文章，那在开始之前，请参看CSS实验道具，打开CSS实验的在线工具。
前言：
我们要了解的最后一种选择器被命名为关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。
1. 后代选择器
前面几节课里面，你已经遇到过后代选择器了——里面在几项之间有着空格的选择器：
body article p
这些选择器选中了其他选择器的后代元素。匹配的时候不要求为子元素。
下面的示例中，我们只会匹配处于带有.box类的元素里面的<p>元素。
/* CSS */
.box p {
color: red;
}
<!-- HTML -->
<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>
实验效果：
2.子代关系选择器
子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为<article>的直接子元素的<p>元素：
article > p
下个示例中，我们弄了个有序列表，内嵌于另一个无序列表里面。我用子代关系选择器，只选中为<ul>的直接子元素的<li>元素，给了它们一个顶端边框。
/* CSS */
ul > li {
border-top: 5px solid red;
}
<!-- HTML -->
<ul>
<li>Unordered item</li>
<li>Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
如果你移去指定子代选择器的>的话，你最后得到的是后代选择器。
实验效果：
 |
 |
|---|---|
| 子代选择器 | 后代选择器 |
通过对比，你了解了吗？
3.邻接兄弟
邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随<p>元素之后的<img>元素：
p + img
常见的使用场景是， 改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨<h1>的段，然后样式化它。
/* CSS */
h1 + p {
font-weight: bold;
background-color: yellow;
color: red;
padding: .5em;
}
/* HTML */
<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>
<h1>A heading</h1>
<h2>我在h1和p之间，插入了h2标签</h2>
<p>我是P标签。我是P标签。我是P标签。我是P标签。我是P标签。</p>
</article>
示例2:
如果你往<h1>和<p>之间插入其他的某个元素，例如<h3>，你将会发现，段落不再与选择器匹配，因而不会应用元素邻接时的前景和背景色。测试代码如下：
<article>
<h1>A heading</h1>
<h3>我是插入的小3</h3> <!-- 这句是插入的h3标签 -->
<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>
实验效果：
 示例1
|
 示例2
|
|---|
4. 通用兄弟
如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）。要选中所有的<p>元素后任何地方的<img>元素，我们会这样做：
p ~ img
实验代码：
/* CSS */
h1 ~ p {
font-weight: bold;
background-color: yellow;
color: red;
padding: .5em;
}
<!-- HTML -->
<article>
<h1>A heading</h1>
<p>I am a paragraph.</p>
<div>I am a div</div>
<p>I am another paragraph.</p>
</article>
我们可以将~改成+，变成相邻兄弟，看看对比效果。
实验效果：
 |
 |
|---|---|
| 通用兄弟 | 相邻兄弟 |
在通用兄弟的示例中，我们选中了所有的 <h1>之后的<p>元素，虽然文档中还有个 <div>，其后的<p>还是被选中了。
小结：
好了，至此，关于选择器的部分已经说完，这一章节，详细讲述了关系选择器。那么你能将关系选择器和前几章的选择器组合使用了吗？
例如如果我们想选中为<ul>的直接子元素的带有“a”类的列表项的话，我可以用下面的代码。
ul > li[class="a"] { }
不过，建立一长列选中你的文档中很明确的部分的选择器的时候，小心一些。这些CSS规则难以复用，因为你让选择器在表示标记文本中的元素的相对位置上过于明确。
建立简单的一个类，然后把它应用到有需求的元素上，经常会是更好的做法。不过话说回来，如果你需要让你的文档变换一下样式，但是没法编辑HTML（也许是因为它由CMS生成）的话，你的关系选择器的知识会派上用场。
你能记住最重要的信息吗？你可以找些更深入的测试，在继续下去之前，验证你是否已经获取了这些信息——见小试牛刀：选择器
