如何嵌套你的CSS选择器更干净的代码

学习CSS是一个令人兴奋的时刻——当你开始看到你的页面从纯文本墙变成一个时尚和迷人的网站，就像我们每天看到的那些。但是，如果您不注意的话，您的代码可能会变得有点混乱。

在计算机科学中，有许多不同的方法可以在CSS中完成相同的事情，有些方法比其他方法更有效。根据您的方法，您最终可能会得到干净或混乱的前端代码。

例如，假设您想要样式化页面中的所有段落<大>按一定的方式分段。你可以给每个段落分配一个类，比如.main-paragraph并以样式化为目标。

这非常好，但是有一个更有效的选择:将CSS规则嵌套到目标元素中在元素。您可以通过一个称为“组合符”的CSS特性来实现这一点。了解什么是CSS组合符以及如何应用它们可以帮助您的代码更清晰和更容易理解，所以让我们直接进入。

CSS组合符的类型

CSS3包括四种类型的组合子:后代组合子、相邻兄弟组合子和一般兄弟组合子。让我们来复习一下。

后代选择符

后代组合子被写成由一个空格分隔的两个选择器，并针对从第一个选择器派生(即嵌套在其中)的第二个选择器的所有实例。

例如，后代组合子# div标签页将关联规则应用于所有< p >div中的元素# div标签——见下文。

看到这支笔嵌套CSS:后代组合1作者:Christina Perricone (@hubspot)CodePen．

当您想要样式化页面的指定部分中某个元素的所有实例时，后代组合子可以很好地工作。回到我们在介绍中的情况，你可能想要设计所有的风格< p >元素在你<大>一种方式，另一种方式< p >it’这一页的写法不同。在这种情况下，可以使用后代组合子主要p．

看到这支笔嵌套CSS:后代组合2作者:Christina Perricone (@hubspot)CodePen．

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

然而，您可能并不总是希望深入应用样式化——这就是子组合符的作用所在。

子选择符

子组合子被写成一个大于号(>)，放在两个CSS选择器之间。它的目标是一个元素的所有实例，这些实例都是另一个元素的直接后代或子元素。样式级联在第一个嵌套层之后停止。

在下面的例子中，我使用了后代组合子给所有段落文字上色内部<大>的子段落样式，以及一个子组合符<大>与一个更大的字体大小．注意,主要> pCombinator并不影响< p >在< div >元素。

看到这支笔嵌套CSS:子组合作者:Christina Perricone (@hubspot)CodePen．

相邻兄弟Combinator

相邻的兄弟组合符被写成两个CSS选择器之间的加号(+)。只有当它紧跟在与第一个选择器匹配的元素之后时，它才会瞄准与第二个选择器匹配的元素。此外，这两个元素必须是同一个父元素的子元素(因此被称为“兄弟元素”)。

下面，看看第一段是如何接受样式的，因为它直接跟在后面<标题>．然而，第二段不是。

看到这支笔嵌套CSS:相邻的兄弟组合符作者:Christina Perricone (@hubspot)CodePen．

一般兄弟姐妹Combinator

一般的同胞选择器被写为波浪符号(~)，并针对特定同胞元素后面的所有元素。与相邻的兄弟选择器不同，目标元素不需要立即跟随第一个元素。

在这个例子中，所有< p >元素之所以具有样式是因为它们可以继续<标题>在文件中，尽管不是所有的都是直接相邻的。

看到这支笔嵌套CSS:一般的同胞组合器作者:Christina Perricone (@hubspot)CodePen．

编写干净的CSS

嵌套CSS选择器是一个小技巧，可以让事情变得更容易。您将更快地编写CSS，更有效地应用样式更改，而不必担心在正确的HTML标记中放置大量id或类属性。

combinator们需要一些练习才能做出正确的选择。但是，在掌握CSS和转向框架之前引导，你应该学习它们-它们是你的前端工具带的一个方便的技巧。