我刚开始学习 CSS，遇到了一个我不完全理解的例子。我无法很好地描述它，这使得找到答案变得困难（因此，如果我忽略的答案已经存在，我深表歉意）。
我的问题是关于以下示例：
.theme-light.slider-wrapper {
background: #fff;
padding: 10px;
}
我知道 CSS 中的类是使用.name语法定义的，然后可以在标签中使用，如下所示：
<div class="name"></div>
我不明白“双重”声明的.name1 .name2工作原理以及如何在标签中使用它。
在相关说明中，给我的示例网站在样式表中不存在的标签中使用了一个 ID.. 还能在哪里定义呢？
在带有选择器的 CSS 中，.className您可以使用“className”类为每个元素定义属性。每个元素都可以有更多的类。具有更多类的选择器的含义取决于您在声明中如何组合它们：
.class1.class2将仅匹配定义了这两个类的元素。
.class1.class2 { background: red; }
<div class="class1 class2"></div>
.class1, .class2将匹配 .class1 或 .class2 的元素
.class1, .class2 { background: yellow; }
<div class="class1"></div>
<div class="class2"></div>
.class1 .class2将仅匹配具有 class1 的元素中具有 class2 的元素。
.class1 .class2 { background: blue; }
<div class="class1">
<div class="class2"></div>
</div>
也许这个使用示例会为您解决问题。
想象以下场景。
你将会拥有：
<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>
假设您希望 div 具有以下相同的属性：
.general-div {width: 300px; height: 300px; border: 1px solid #000;}
.extra-div {width: 200px; height: 200px; border: 1px solid #666;}
但是您希望具有 .special 类的 .general-div 具有红色背景，而具有 .special 类的额外 div 具有蓝色背景。
你会写：
.general-div.special {background-color: red;}
.extra-div.special {background-color: blue;}
希望它可以清除有关情况的使用。
如何使用双重课程，例如 <div class="name1 name2"></div>？
你div必须上课name1和name2（见现场演示）。
怎么样 .theme-light.slider-wrapper？
这意味着您的元素必须同时具有 theme-light和slide-wrapper类（参见现场演示）。
它对更多元素有好处。您希望某些元素具有灰色背景。没问题！将它们添加类gray并定义 css：
.gray {
background: #ddd;
}
您还需要一些元素有红色文本。red-text用css定义类：
.red-text {
color: red;
}
最后你的段落有灰色背景和红色文本。只需像这样添加gray和red-text类<p class="gray red-text">Lorem ipsum</p>。
.theme-light.slider-wrapper只是意味着它有两个类。在 HTML 中，它可能如下所示：
<div class="theme-light slider-wrapper"></div>
至于 ID，没有理由必须在 CSS 中引用 HTML 中的 ID
这是您的问题的详细解释。
来自：www.itsmesharath.in
你必须使用
<div class="class1 class2">
将多个类应用于一个对象。