零基础CSS入门教程(9)–class选择器
点此查看 所有教程、项目、源码导航
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属性值。
<style>
.text-blue {
}
.text-green {
}
</style>
第三步，为class选择器设置样式，在大括号内编写选择器对应的样式：
<style>
.text-blue {
color: blue;
}
.text-green {
color: green;
}
</style>
通过上面的代码，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样式编写的过程中，也是强烈推荐优先使用的！