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

css class definition with multiple identifiers

提问by Raj

I have just started learning CSS and have come across an example that I do not fully understand. I cannot describe it well which has made finding an answer difficult (I therefore apologise if an answer already exists that I have overlooked).

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

My question is regarding the following example:

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

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

I understand that classes in CSS are defined using the .namesyntax which can then be used in tags like so:

我知道 CSS 中的类是使用.name语法定义的，然后可以在如下标签中使用：

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

I do not understand how the "double" declaration of .name1.name2works and how this would be used in a tag.

我不明白“双重”声明.name1.name2如何工作以及如何在标签中使用它。

On a related note the example website that I was given uses an ID in a tag that does not exist in the stylesheet.. where else could this have been defined?

在相关说明中，给我的示例网站使用了样式表中不存在的标签中的 ID .. 还能在哪里定义？

回答by diegocstn

In CSS with the .classNameselector you can define the properties for every element with "className" class. Every element could have more classes. The meaning of a selector with more classes depends on how you combine them in your declarations:

在带有.className选择器的CSS 中，您可以使用“className”类为每个元素定义属性。每个元素都可以有更多的类。具有更多类的选择器的含义取决于您如何在声明中组合它们：

• .class1.class2will match only the elements that have both of them classes defined.

  .class1.class2 { background: red; }
  <div class="class1 class2"></div>
  

• .class1, .class2will match the elements with .class1 or .class2

  .class1, .class2 { background: yellow; }
  <div class="class1"></div>
  <div class="class2"></div>
  

• .class1 .class2will match only the elements with class2 within elements with class1.

  .class1 .class2 { background: blue; }
  <div class="class1">
      <div class="class2"></div>
  </div>
  

• .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>
  

回答by Marko Francekovic

Maybe this use example will clear things up for you.

也许这个用例会为你解决问题。

Imagine the following scenario.

想象一下下面的场景。

You would have:

你将会拥有：

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

And lets say you want div's to have the same attributes as follows:

假设您希望 div 具有如下相同的属性：

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

But you want the .general-div with .special class to have red background, and extra-div with .special class to have a blue background.

但是您希望带有 .special 类的 .general-div 具有红色背景，而带有 .special 类的 extra-div 具有蓝色背景。

You would write:

你会写：

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

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

Hope it clears up the use of situation in question.

希望它清除使用问题的情况。

回答by Sean Redmond

.theme-light.slider-wrapperjust means that it has both classes. In the HTML it could look like this:

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

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

As for the ID, there's no reason that an ID in the HTML should have to be referenced in CSS

至于 ID，没有理由必须在 CSS 中引用 HTML 中的 ID

回答by Vuka?in Manojlovi?

How to use double classes, like<div class="name1 name2"></div>?

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

You divhas to classes name1and name2(see live demo).

你div必须上课name1和name2（见现场演示）。

---

---

What about.theme-light.slider-wrapper?

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

That means your element has to have both theme-lightand slide-wrapperclasses (see live demo).

这意味着您的元素必须同时具有 theme-light和slide-wrapper类（请参阅现场演示）。

It is good for more elements. You want some elements to have gray background. No problem! Add them class grayand define css:

它适用于更多元素。您希望某些元素具有灰色背景。没问题！将它们添加到类gray并定义 css：

.gray {
   background: #ddd;
}

Also you need some elements have red text. Define red-textclass with css:

您还需要一些元素具有红色文本。red-text用 css定义类：

.red-text {
   color: red;
}

And the end your paragraph has gray background and red text. Just add both grayand red-textclasses like this <p class="gray red-text">Lorem ipsum</p>.

你的段落末尾有灰色背景和红色文本。只需像这样添加gray和red-text类<p class="gray red-text">Lorem ipsum</p>。

回答by Sharath

Here is a detailed explanation for your question.

这是对您的问题的详细解释。

From: www.itsmesharath.in

来自：www.itsmesharath.in

回答by Victor

you have to use

你必须使用

<div class="class1 class2"> 

to apply multiple classes to an object.

将多个类应用于一个对象。