关系选择器

概述：CSS 构建

我们要了解的最后一种选择器被命名为关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。

后代选择器

后代选择器——典型用单个空格（" "）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

css

body article p
下面的示例中，我们只会匹配处于带有.box类的元素里面的<p>元素。
&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="子代关系选择器"&gt;&lt;h2 id="子代关系选择器"&gt;&lt;a href="#子代关系选择器"&gt;子代关系选择器&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;p&gt;子代关系选择器是个大于号（&lt;code&gt;&amp;gt;&lt;/code&gt;），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如，只选中作为&lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt;的直接子元素的&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;元素：&lt;/p&gt;
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;css&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: css notranslate"&gt;&lt;code&gt;article &amp;gt; p
&lt;p&gt;下个示例中，我们弄了个有序列表，内嵌于另一个无序列表里面。我用子代关系选择器，只选中为&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;的直接子元素的&lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;元素，给了它们一个顶端边框。&lt;/p&gt;
&lt;p&gt;如果你移去指定子代选择器的&lt;code&gt;&amp;gt;&lt;/code&gt;的话，你最后得到的是后代选择器，所有的&lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;会有个红色的边框。&lt;/p&gt;&lt;iframe width="100%" height="600" src="https://mdn.github.io/css-examples/learn/selectors/child.html" loading="lazy"/&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="邻接兄弟"&gt;&lt;h2 id="邻接兄弟"&gt;&lt;a href="#邻接兄弟"&gt;邻接兄弟&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;p&gt;邻接兄弟选择器（&lt;code&gt;+&lt;/code&gt;）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如，选中所有紧随&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;元素之后的&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;元素：&lt;/p&gt;
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;css&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: css notranslate"&gt;&lt;code&gt;p + img
&lt;p&gt;常见的使用场景是，改变紧跟着一个标题的段的某些表现方面，就像是我下面的示例那样。这里我们寻找一个紧挨&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;的段，然后样式化它。&lt;/p&gt;
&lt;p&gt;如果你往&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;和&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;之间插入其他的某个元素，例如&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;，你将会发现，段落不再与选择器匹配，因而不会应用元素邻接时的前景和背景色。&lt;/p&gt;&lt;iframe width="100%" height="800" src="https://mdn.github.io/css-examples/learn/selectors/adjacent.html" loading="lazy"/&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="通用兄弟"&gt;&lt;h2 id="通用兄弟"&gt;&lt;a href="#通用兄弟"&gt;通用兄弟&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;p&gt;如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（&lt;code&gt;~&lt;/code&gt;）。要选中所有的&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;元素后&lt;em&gt;任何地方&lt;/em&gt;的&lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt;元素，我们会这样做：&lt;/p&gt;
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;css&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: css notranslate"&gt;&lt;code&gt;p ~ img
&lt;p&gt;在下面的示例中，我们选中了所有的 &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;之后的&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;元素，虽然文档中还有个 &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;，其后的&lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;还是被选中了。&lt;/p&gt;&lt;iframe width="100%" height="600" src="https://mdn.github.io/css-examples/learn/selectors/general.html" loading="lazy"/&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="使用关系选择器"&gt;&lt;h2 id="使用关系选择器"&gt;&lt;a href="#使用关系选择器"&gt;使用关系选择器&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;p&gt;你能用关系选择器，将任何在我们前面的学习过程中学到的选择器组合起来，选出你的文档中的一部分。例如如果我们想选中为&lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt;的直接子元素的带有“a”类的列表项的话，我可以用下面的代码。&lt;/p&gt;
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;css&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: css notranslate"&gt;&lt;code&gt;ul &amp;gt; li[class="a"] {