创新互联SASS教程:2-2.群组选择器的嵌套

在CSS里边，选择器h1,h2,h3会同时命中h1元素、h2元素和h3元素。与此类似，.button,button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器的规则会对命中群组中任何一个选择器的元素生效。

.button, button {
  margin: 0;
}

当看到上边这段代码时，你可能还没意识到会有重复性的工作。但会很快发现——如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰，情况就不同了。css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

非常幸运，sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时，它会把每一个内嵌选择器的规则都正确地解出来:

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

首先sass将.container和h1.container和h2.container和h3分别组合，然后将三者重新组合成一个群组选择器，生成你前边看到的普通css样式。对于内嵌在群组选择器内的嵌套规则，处理方式也一样:

nav, aside {
  a {color: blue}
}

首先sass将nav和aaside和a分别组合，然后将二者重新组合成一个群组选择器:

nav a, aside a {color: blue}

处理这种群组选择器规则嵌套上的强大能力，正是sass在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时，与普通的css编写方式相比，只写一遍群组选择器大大减少了工作量。

有利必有弊，你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小，但实际生成的css却可能非常大，这会降低网站的速度。

关于选择器嵌套的最后一个方面，我们看看sass如何处理组合选择器，比如>、+和~的使用。你将看到，这种场景下你甚至无需使用父选择器标识符。

本文标题：创新互联SASS教程:2-2.群组选择器的嵌套
本文网址：http://www.shufengxianlan.com/qtweb/news2/312052.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联