文章目录1. 前言2. 不使用分组选择器3. 使用分组选择器4. 混合使用分组选择器5. 小结1. 前言有时候我们希望把样式应用到不止一个元素上如果按照之前的方式我们只能通过id选择器/class选择器/元素选择器逐一设置元素的样式。本篇我们介绍下分组选择器通过分组选择器我们可以一次性设置多种选择器对应元素的样式。2. 不使用分组选择器考虑如下代码bodyh1凉州词/h1h4作者王之涣/h4p黄河远上白云间/pp一片孤城万仞山/pp羌笛何须怨杨柳/pp春风不度玉门关/p/body如果我们希望标题、作者、诗词都使用蓝色文本那么CSS代码如下h1{color:blue;}h4{color:blue;}p{color:blue;}写起来还是挺麻烦的。3. 使用分组选择器如果使用分组选择器我们可以使用逗号分割开选择器然后统一应用一些样式代码。h1,h4,p{color:blue;}如上代码表示将{color: blue;}同时应用于三个元素选择器所以效果如下4. 混合使用分组选择器分组选择器可以同时将id、元素选择器、class选择器一并分组例如下面的例子headmetacharsetutf-8styleh1, h4, .blue-text, #blue-id{color:blue;}/style/headbodyh1凉州词/h1h4作者王之涣/h4pclassblue-text黄河远上白云间/pp一片孤城万仞山/ppidblue-id羌笛何须怨杨柳/pp春风不度玉门关/p/body我们的分组选择器同时应用于h1元素选择器、h4元素选择器、.blue-textclass选择器、#blue-idid选择器所以效果如下5. 小结通过分组选择器我们编写CSS代码可以非常灵活的应用于我们指定的多个选择器这样能够更加的灵活