了解CSS组合器 _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标签。
假设您有一篇博客文章，并且只想使介绍性段落具有红色背景和白色文本，如下所示：

文章插图

【了解CSS组合器】这是代码：
p{ font-size: 20px;}h1 + p { background-color: red; color: white; padding: 10px;}使用相邻的同级组合器，我们可以仅隔离第一个p标签并应用我们的样式。如果我们想对标签后面的