了解CSS组合器
如何使用它们，为什么
样式表通过使用所谓的选择器来引用html中的特定元素。这些选择器可以是Clsaa，ID，元素本身等。
我们将在本文中重点介绍的选择器是combinator。
它们以一种方式组合其他选择器，使它们彼此之间以及文档中内容的位置具有有用的关系。——MDN网络文档
组合器可以通过最大化元素关联而不会使HTML淹没来确保css精确。看一下这个例子：
<div> <div> <h1>Team 1</h1> <ul> <li> <div> <h2>Player 1</h2> <ul> <li>Average points per game: 20</li> </ul> </div> </li> </ul> </div> </div>
实际上，此HTML结构不是太复杂。但是，如果团队中有不止一个球员，或者团队不止一个，该怎么办？如果您想为每个球员增加更多统计数据呢？类和ID有效，但是随着HTML的增长，它可能会限制CSS的灵活性。
随着网站需求的增长，元素的数量也会增加。元素嵌套得越多，访问它们就越困难。
当您要对具有共享类的一个或多个元素进行少量调整时，这可能也会有问题。这可能导致您要么创建更多的类或id，要么采用内联样式，要么使用!important。
过度使用类和ID还可以在HTML中创建更多的呈现标记，从而为您和其他使用该代码的人创建更多的工作。组合器通过有效地关联页面上的元素，减轻了过分具体的选择器的负担和繁重的标记。让我们深入探讨我们可以使用的各种组合器。
相邻Sibling
该组合器由+符号标识，并选择提供的标签旁边的元素。
h1 + p
上面的示例将选择p标签之后的第一个h1标签。
假设您有一篇博客文章，并且只想使介绍性段落具有红色背景和白色文本，如下所示：
这是代码：
p{
font-size: 20px;
}
h1 + p {
background-color: red;
color: white;
padding: 10px;
}
使用相邻的同级组合器，我们可以仅隔离第一个p标签并应用我们的样式。如果我们想对标签后面的每个标签应用以上样式，该怎么办？在这种情况下，我们可以使用通用的同级组合器。p h1
普通Sibling
该组合器由~符号标识。
h1 ~ p
上面的代码将选择位于p我们h1标签之后的所有标签。
如果从前面的例子了代码，并改变h1 + p对h1 ~ p你会得到这样的：
img选择器之间还有其他元素（如上述）时，它甚至可以工作。
相邻的同级组合器不是这种情况。
仅当元素与第一个标签直接相邻时，相邻的同级组合器才起作用。但是，我们可以p在图像之前添加一个标记（标签）并为其提供灰色背景：
p {
font-size: 20px;
}
h1 ~ p {
background-color: red;
color: white;
padding: 10px;
}
h1 + p {
background-color: grey;
}
上面的代码为我们提供了以下结果：
现在我们已经介绍了Sibling，让我们谈谈子选择器。
子选择器
很简单，第一个与子相关的组合器就是子组合器。用符号标识的该组合器仅选择元素的直接子代。>
让我们在文章右侧的博客页面中添加一个侧边栏，并将它们都包装在parent中div。边栏将包含ul下一步要阅读的内容。li相关内容和无关内容都有两个。这些每一个都将包含ul的liS的代表物品。第一个ul应该有一个左边框以将其与主要文章分开，并且没有列表样式。嵌套ul的不应具有边框和默认列表样式。我们可以使用下面的代码来实现：
div > ul {
border-left: solid 1px black;
margin-left: 10px;
padding-left: 10px;
list-style: none;
width:300px;
}
通过使用子组合器，我们仅选择ul作为父项的直接子项（我们的新侧边栏）的标签div。这会将左边框和没有列表样式应用于ul包含sub ul而不是sub ul本身的标签。让我们给父母div一个显示，flex使我们的文章和侧边栏水平对齐。结果如下：
如您所见，只有直接子项ul具有左边框，没有列表样式。嵌套的uls没有边框和默认列表样式。这些li标签看起来有些变形。如何使li两个标签中的每个标签ul的底边距为10px？我们可以使用我们的最后一个组合器，即后代组合器来做到这一点。
后代组合器
这些组合器由选择器之间的空格标识，并且与子组合器不同，它们不仅引导子对象，而且还指示选择器的每个后代。
ul li {
margin-bottom: 10px;
}
上面的CSS将10px在每个li标签下方创建一个边距，如下所示：
现在，假设我们要对所有文章标题加下划线，但不对章节标题加下划线（li由相关文章和无关文章标识）。让我们使用稍微更指定的后代combinator添加以下CSS 。
ul li ul li {
text-decoration: underline;
}
结果如下所示。
您可能已经注意到在介绍段落下方的位置方便的广告。这则广告演示了如何将组合器进一步组合到目标元素。
div div > div > p + p {
color: purple;
font-size: 15px;
}
这组选择器定位p到与作为p的子级标签相邻的所有标签div。在div被检索的目标div是这样的的孩子div包含我们的文章和边栏。
还在我这儿？
我们使用后代，子级和相邻的同级组合器来选择p广告中的第二个标记div，因此我们可以应用其他样式。
组合器有助于保持我们的HTML灵活和相对干净。这篇文章中的所有代码都可以在该Codepen中找到。随意摆弄组合器，看看无需使用任何类或ID 即可将样式推进多远。
翻译自：https://medium.com/better-programming/understanding-css-combinators-a36e013b1bed
