JavaWeb学习之路(35)–CSS之分组选择器

ゝ一纸荒年。 2022-08-28 02:51 190阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  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;}`同时应用于三个元素选择器，所以效果如下：  
![在这里插入图片描述][f373149533ae4f72be9e92347155d75b.png]

# 4. 混合使用分组选择器 #

分组选择器可以同时将id、元素选择器、class选择器一并分组，例如下面的例子：

<head>
        <meta charset="utf-8">
        <style>
            h1,
            h4,
            .blue-text,
            #blue-id {
          
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>凉州词</h1>
        <h4>作者：王之涣</h4>
        <p class="blue-text">
            黄河远上白云间
        </p>
        <p>
            一片孤城万仞山
        </p>
        <p id="blue-id">
            羌笛何须怨杨柳
        </p>
        <p>
            春风不度玉门关
        </p>
    </body>

我们的分组选择器，同时应用于`h1`元素选择器、`h4`元素选择器、`.blue-text`class选择器、`#blue-id`id选择器，所以效果如下：  
![在这里插入图片描述][fbe89c992a394591830baaf6abe7b230.png]

# 5. 小结 #

通过分组选择器，我们编写CSS代码，可以非常灵活的应用于我们指定的多个选择器，这样能够更加的灵活！

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[f373149533ae4f72be9e92347155d75b.png]: /images/20220828/21e545b1fa2a45b4a63571ff16d14881.png
[fbe89c992a394591830baaf6abe7b230.png]: /images/20220828/e688606f0baa4f78bf295fee39280f5b.png