JavaWeb学习之路(31)–CSS之class选择器使用详解

た入场券 2022-09-16 08:40 187阅读 0赞

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

### 本文目录 ###

*  1. 前言
 *  2. 场景
 *  3. 使用方法
 *  4. 整体解析
 *  5. class选择器的优点
 *  6. 小结

# 1. 前言 #

前2片分别介绍了元素选择器、id选择器，其实这两种选择器还不是最常用的选择器。

最常用、使用频率最高、最受前端程序员欢迎的选择器，毫无疑问是class选择器。

为啥呢?因为元素选择器选择元素过于宽松，而id选择器过于严谨，class选择器面向某一类元素进行选择，实现了灵活度和广泛性的良好结合。

说的有点高深了，本篇就带大家伙了解下class选择器。

# 2. 场景 #

考虑考这么一个场景，还是那首《凉州词》，如果我们想实现奇数行蓝色、偶数行绿色，咋处理呢。

此时，如果使用元素选择器，则所有元素只能采用一种颜色。

如果使用id选择器，则需要为四个元素分别设置id，然后为四个id分别设置样式。

但是明明只有两种样式啊！

此时就可以适用class选择器了。

# 3. 使用方法 #

HTML中专门有一个设置样式的属性，即class属性，通过该属性可以设置当前标签应用的样式类。

所以，第一步，我们为四个段落设置两种样式类：

<body>
        <p class="text-blue">黄河远上白云间</p>
        <p class="text-green">一片孤城万仞山</p>
        <p class="text-blue">羌笛何须怨杨柳</p>
        <p class="text-green">春风不度玉门关</p>
    </body>

第二步，在头部style标签中设置class选择器，注意class选择器使用`.xxx`格式，`.`表示此选择器是class选择器，`xxx`表示选择器应用的标签class属性值。

第三步，为class选择器设置样式，在大括号内编写选择器对应的样式：

通过上面的代码，class值为text-blue的标签，会应用`color:blue`样式；而class值为text-green的标签，会应用`color:green`样式。

# 4. 整体解析 #

看完整代码:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <style>
            .text-blue {
          
                color: blue;
            }
            .text-green {
          
                color: green;
            }
        </style>
    </head>
    <body>
        <p class="text-blue">黄河远上白云间</p>
        <p class="text-green">一片孤城万仞山</p>
        <p class="text-blue">羌笛何须怨杨柳</p>
        <p class="text-green">春风不度玉门关</p>
    </body>
    </html>

首先看头部的style标签内，有两个选择器，这两个选择是以`.`开头，所以是class选择器。

选择器针对的class分别为`text-blue`、`text-green`，所以网页上class值为`text-blue`、`text-green`的元素会应用对应大括号内的样式。

# 5. class选择器的优点 #

本篇开头也说了，class选择器是最常用的选择器，那么它到底有何优点呢。

试想这么一个场景，我们正在开发一个网站，其中按钮的风格肯定是统一的。也就是说，按钮的样式是遵循一个风格，是类似的。

我们通过一系列CSS代码定义了一个好看的按钮，就可以通过class选择器，将其应用于其他功能类似的按钮。

所以class选择器机制，可以让我们自定义一个样式库，然后随时应用于我们想要设置该样式的标签元素上。

甚至别人写好的calss样式，我们也可以拿过来应用。

这就是说，可以利用经验，加快编程！

# 6. 小结 #

class选择器作为最常用的选择器，在日常CSS样式编写的过程中，也是强烈推荐优先使用的！

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926