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

【问题标题】：css class definition with multiple identifiers具有多个标识符的 css 类定义
【发布时间】：2012-11-06 20:01:48
【问题描述】：

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

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

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

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

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

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

在相关说明中，给我的示例网站在样式表中不存在的标签中使用了一个 ID。还有其他地方可以定义吗？

【问题讨论】：

如果你想看看它是如何工作的jsfiddle.net/MUc4T
{ 之前的部分称为“选择器” 选择器可以通过多种不同的方式定义和组合。本网站可以帮助您更好地了解可能性。 w3schools.com/cssref/css_selectors.asp

标签： html css class

【解决方案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>

【讨论】：

很好解释。谢谢！

【解决方案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 类的额外 div 具有蓝色背景。

你会写：

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

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

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

【讨论】：

谢谢，没有意识到句号后不能有空格
句号后面可以有空格，但它有不同的含义。如果您在句点后面放置一个空格，它将选择具有给定类的嵌套项，如果没有空格，它将选择具有所有这些类的元素。
这里有很好的解释
我可以把 .general-div 放在一行，把 .special 放在下一行，就好像它们是连接的一样？
如果你想做类似的事情
然后你可以访问 .special div .general-div .special { }

【解决方案3】：

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

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

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

【讨论】：

【解决方案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>。

【讨论】：

【解决方案5】：

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

来自： www.itsmesharath.in

【讨论】：

【解决方案6】：

你必须使用

<div class="class1 class2">

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

【讨论】：