了解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 即可将样式推进多远。