html - 具有多个标识符的CSS类定义

我刚刚开始学习CSS，并遇到了一个我不完全理解的示例。我无法很好地描述它，这使得找到答案变得困难(因此，如果已经存在一个我已忽略的答案，我深表歉意)。

我的问题是关于以下示例:

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

我知道CSS中的类是使用.name语法定义的，然后可以在像这样的标记中使用:

<div class="name"></div>

我不了解.name1的双重声明.name2的工作方式以及如何在标记中使用它。

在相关说明中，给我的示例网站在样式表中不存在的标记中使用了ID。在哪里可以定义？

最佳答案

也许这个使用示例将为您解决问题。

想象以下情况。

你将会拥有:

<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类的extra-div具有蓝色背景。

你会这样写:

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

希望它能清除有关情况的使用。

关于html - 具有多个标识符的CSS类定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13444647/