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