学习CSS是一个激动人心的时刻 - 这是您开始看到页面从纯文本墙变成时尚而引人入胜的网站的时候，就像我们每天看到的网站一样。但是，如果您不关注，您的代码可能会变得有些混乱。

正如计算机科学通常是正确的那样，在CSS中有许多不同的方法可以完成同一件事，并且某些方法比其他方式更有效。根据您的方法，您最终可能会获得干净或混乱的前端代码。

例如，假设您想在页面中的所有段落样式某种方式。您可以为每个段落分配一个类似的课程.main-paragraph并以样式为目标。

这很好，但是有一个更有效的选择：将CSS规则嵌套到定位元素内元素。您可以使用称为“组合器”的CSS功能来完成此操作。知道什么是CSS组合器以及如何应用它们有助于使您的代码更加干净，更易于理解，因此让我们直接跳入。

CSS组合者的类型

CSS3包括四种类型的组合器：后代组合者，儿童组合，相邻的兄弟姐妹组合者和一般的兄弟姐妹组合器。让我们回顾一下每个。

后代组合

后代组合者写为两个选择器，由单个空间隔开，并针对第二选择器（即嵌套在内部）的第二个选择器的所有实例。

例如，后代组合者＃my-div p将关联的规则应用于所有规则

div内部的元素＃my-div- 见下文。

看到笔嵌套CSS：后代组合1克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

当您想在页面的指定部分中为所有元素的所有实例设计时，后代组合效果很好。回到我们的介绍中的情况，您可能想设定所有样式

你内心的元素以一种方式和所有其他方式

页面上的s不同方式。在这种情况下，您可以使用后代组合者主要p。

看到笔嵌套CSS：后代组合2克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

重要的是，后代组合者选择嵌套在另一个元素的每个实例，包括子元素，这些子元素的子元素等等。

但是，您可能并不总是想深入应用这种样式 - 这是儿童组合者进来的地方。

儿童组合

子组合者被写成一个比两个CSS选择器之间的大于符号（>）。它针对另一个元素的直接后代或子元素的元素的所有实例。风格的级联反应在第一个筑巢水平之后停止。

在下面的示例中，我使用了一个后代组合者为所有段落文字着色里面橙色和一个儿童组合者仅设计了儿童段落与较大的字体尺寸。注意如何主> p组合不影响

在 - 的里面

元素。

看到笔嵌套CSS：儿童组合者克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

相邻的兄弟姐妹组合

相邻的兄弟姐妹组合器被写为两个CSS选择器之间的加号（+）。仅当它立即遵循与第一选择器匹配的元素时，它才针对匹配第二选择器的元素。此外，这两个元素都必须是同一父元素的子女（因此称为“兄弟姐妹”）。

在下面，查看第一段如何收到样式，因为它直接遵循

。但是，第二段没有。

看到笔嵌套CSS：相邻的兄弟姐妹组合者克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

一般兄弟姐妹组合

一般的同级选择器被写成tilde符号（〜），并针对遵循特定同级元素的所有元素。与相邻的兄弟姐妹选择器不同，目标元素无需立即遵循第一个元素。

在此示例中，所有

元素是样式的，因为它们继续

在文档中，尽管并非所有人都彼此直接相邻。

看到笔嵌套CSS：一般兄弟姐妹组合者克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。

编写干净的CSS

嵌套CSS选择器是一个小技巧，它使事情变得更加容易。您将更快地编写CSS，更有效地应用样式更改，而不必担心记住在正确的HTML标签中放置一系列ID或类属性。

组合者将采取一些练习才能正确。但是，在掌握CSS并进入像这样的框架之前引导程序，您应该学习它们 - 它们是前端工具带的方便技巧。

最初出版于2021年6月28日7:00：00 AM，更新于2021年8月23日

话题：

Bootstrap＆css

别忘了分享这篇文章！