具有多个标识符的css类定义

Question

我刚刚开始学习CSS,并且遇到了一个我不完全理解的例子.我无法很好地描述这一点,这使得找到答案很困难(因此,如果已经存在我已经忽略的答案,我会道歉).

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

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

我理解CSS中的类是使用.name语法定义的,然后可以在标签中使用,如下所示:

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

我不明白.name1 .name2作品的"双重"声明以及如何在标签中使用它.

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

Answer 1

在带有.className选择器的CSS中,您可以使用"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>
  

Answer 2

也许这个用例会为你清理.

想象一下以下场景.

你将会拥有:

<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;}

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