css中类选择器用点号表示。为了能使一个元素被多个样式表匹配中，一个元素中的class常由几段构成，例如<div class="c1 c2">能被.c1和.c2两个选择器选中。此外如果.c1和.c2中对相同的属性复制，则按照声明顺序属性值先被改为.c1中的值，之后再改为.c2中的值。
本篇博客记录自：https://www.cnblogs.com/guxin/p/css-multi-class-selector.html
头图来源:秋巫女-ゆっ-pixiv
CSS中类选择器匹配规则
多个类选择器中，以开头为例子，.c1.c2和.c1 .c2的匹配规则是有区别的。
多个类中无空格隔开的情况
如果多个类中无空格隔开(如.c1.c2)，则多类选择器中的类均需在元素的class属性中被声明才能被多类选择器选择。也就是说多类选择器中的类集合需要为class中声明的类集合的子集，如果class属性除了声明了多类选择器中的所有类后还声明了多类选择器中不存在的类仍然还能被多类选择器选择，反之多类选择器中如果存在class未声明的类则该元素就无法被此多类选择器选择。
举个栗子帮助理解。
代码
<html>
<head>
<style>
.c1.c2 {
font-size: 3em;
padding: 2em 2em;
color: rgb(0, 47, 255);
text-shadow: 2px 4px 3px black;
}
</style>
</head>
<body>
<div>
<p class="c1 c2">hi</p>
</div>
</body>
</html>以上元素<p>能被选择器选中，而如果是下面的代码，<p>则无法被选择器选中
<html>
<head>
<style>
.c1.c2.c3 {
font-size: 3em;
padding: 2em 2em;
color: rgb(0, 47, 255);
text-shadow: 2px 4px 3px black;
}
</style>
</head>
<body>
<div>
<p class="c1 c2">hi</p>
</div>
</body>
</html>多个类中有空格隔开的情况
如果多个类选择器中，类与类间有空格隔开(如.c1 .c2)，则表示为一个后代选择器（注意与子元素选择器相区别）。它将匹配到class中含有c1的元素的后代元素中class含有c2的元素。
举个栗子帮助理解
<html>
<head>
<style>
.c1 .c2 {
font-size: 3em;
padding: 2em 2em;
color: rgb(0, 47, 255);
text-shadow: 2px 4px 3px black;
}
</style>
</head>
<body>
<div class="c1">
<p class="c2">hi</p>
</div>
</body>
</html>上面代码中<p>元素能被.c1 .c2匹配中。
