如何使用它们,为什么
样式表通过使用所谓的选择器来引用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中创建更多的呈现标记,从而为您和其他使用该代码的人创建更多的工作。组合器通过有效地关联页面上的元素,减轻了过分具体的选择器的负担和繁重的标记。让我们深入探讨我们可以使用的各种组合器。
该组合器由+符号标识,并选择提供的标签旁边的元素。
h1 + p
上面的示例将选择p标签之后的第一个h1标签。
假设您有一篇博客文章,并且只想使介绍性段落具有红色背景和白色文本,如下所示:
这是代码:
p{ font-size: 20px; } h1 + p { background-color: red; color: white; padding: 10px; }
使用相邻的同级组合器,我们可以仅隔离第一个p标签并应用我们的样式。如果我们想对标签后面的每个标签应用以上样式,该怎么办?在这种情况下,我们可以使用通用的同级组合器。p h1
该组合器由~符号标识。
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