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

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

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

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

一：类名选择器

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

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

1：语法

对于 class 选择器，我们必须在 class 名前面加上前缀符号 . ，后面紧跟 class 名，表示这是一个 class 选择器，不加 . 前缀该选择器就是无效的。基本语法格式如下图所示 再在需要指定样式的元素加上 class 属性，属性值是你指定的 class 名。

2：举例说明

如下代码所示

	雄心志四海，万里望风尘
	雄心志四海，万里望风尘
	雄心志四海，万里望风尘

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

	雄心志四海，万里望风尘
	雄心志四海，万里望风尘
	雄心志四海，万里望风尘
	雄心志四海，万里望风尘

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 代码如下

	雄心志四海，万里望风尘

浏览器运行效果如下所示 也许你会问，那为什么不写成下面这种写法呢

	雄心志四海，万里望风尘

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

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

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

结束语 技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。 最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。