具有多个标识符的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;}

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

Answer 3

.theme-light.slider-wrapper只意味着它有两个类。在HTML中它可能如下所示：

<div class="theme-light slider-wrapper"></div>

对于ID，没有必要在CSS中引用HTML中的ID

Answer 4

如何使用双重类，例如 <div class="name1 name2"></div>？

您div必须上课name1和name2（see live demo）。

---

.theme-light.slider-wrapper怎么样？

这意味着您的元素必须包含theme-light和slide-wrapper个类（see live demo）。

这对更多元素有好处。您希望某些元素具有灰色背景。没问题！添加类gray并定义css：

.gray {
   background: #ddd;
}

另外你需要一些有红色文字的元素。使用css定义red-text类：

.red-text {
   color: red;
}

结束你的段落有灰色背景和红色文字。只需添加gray和red-text类，例如<p class="gray red-text">Lorem ipsum</p>。

Answer 5

你必须使用

<div class="class1 class2"> 

将多个类应用于对象。

Answer 6

以下是您问题的详细说明。

自： www.itsmesharath.in