【CSS 教程系列第 7 篇】什么是 CSS 中的 class 选择器（类选择器）、多类名选择器

这是【CSS 教程系列第 7 篇】，如果觉得有用的话，欢迎关注专栏。

CSS 的选择器有很多，常用的有元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器等。

本篇博客说的是 class 选择器，详细内容如下

文章目录

一：类名选择器
- 1：语法
- 2：举例说明
- 3：注意事项
二：多类名选择器
- 1：举例说明

一：类名选择器

class 选择器，也叫类选择器。与 id 选择器不同的是，你可以在一个页面设置多个相同的 class ，就好比身份证号没有相同的，但却可以同名同姓。

我们可以对"相同的元素" 或者 “不同的元素” 定义相同的 class 属性，然后对拥有相同 class 属性的元素进行 CSS 样式操作。

1：语法

对于 class 选择器，我们必须在 class 名前面加上前缀符号 . ，后面紧跟 class 名，表示这是一个 class 选择器，不加 . 前缀该选择器就是无效的。基本语法格式如下图所示

再在需要指定样式的元素加上 class 属性，属性值是你指定的 class 名。

2：举例说明

如下代码所示

 <div>雄心志四海，万里望风尘</div><div>雄心志四海，万里望风尘</div><div>雄心志四海，万里望风尘</div>

浏览器运行效果如下所示

我希望前两个 div 元素和 p 元素的文本颜色为红色，字体大小为 18 像素，这时就可以使用 class 选择器，HTML 代码如下

 <div class="myClass">雄心志四海，万里望风尘</div><div class="myClass">雄心志四海，万里望风尘</div><p class="myClass">雄心志四海，万里望风尘</p><div>雄心志四海，万里望风尘</div>

CSS 代码如下

 .myClass {color: red;font-size: 18px;}

浏览器运行效果如下所示

.myClass {color: red;font-size: 18px;} 这行代码的意思是选中 class 为 myClass 的元素，然后设置该元素的文本颜色为红色，字体大小为 18 像素。

3：注意事项

1：什么时候使用 class 选择器

如果你要为两个或多个元素定义相同的样式，元素可以是相同的，也可以是不同的，建议使用 class 选择器，这样可以减少代码的冗余度。

2：class 名的命名规范

先字母，后数字的命名是允许的，如 a1
先数字，后字母的命名是不允许的，如 1a

如果你自己测试过，你会发现，你可以在 HTML 中定义 class = “1a” ，这是不会报错的，但当你在 CSS 中去引用这个类名时，就会出错，提示你 unexpected token ，翻译过来就是 “意外的标记”。

除了这个外

不建议使用下划线 _ 来命名 CSS 选择器，以便区分 JavaScript 中的变量命名。
不要以纯数字、中文命名，尽量使用英文字母来表示。

二：多类名选择器

多类名选择器也属于类名选择器，只不过可以一次引用多个类选择器，使用上也很简单，只需要在之前的类名后再按一下空格，然后直接写上类名即可。

1：举例说明

比如现在分别有 classOne 和 classTwo 的类名，classOne 负责修改元素的文本颜色和字体大小，classTwo 负责字体加粗显示，CSS 代码如下所示

 .classOne{color: blue;font-size: 18px;}.classTwo{font-weight: bold}

HTML 代码如下

 <div class="classOne classTwo">雄心志四海，万里望风尘</div>

浏览器运行效果如下所示

也许你会问，那为什么不写成下面这种写法呢

 <div class="classOne" class="classTwo">雄心志四海，万里望风尘</div>

首先需要说明一下，这种写法是错误的，因为一个标签里面只能写一个 class，需要记住这一点。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语

技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。

最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。