具有多个值的html类属性（空格分隔）[重复]答案

【问题标题】：html class attribute with multiple values (space seperated) [duplicate]具有多个值的html类属性（空格分隔）[重复]
【发布时间】：2015-01-06 21:16:38
【问题描述】：

我在一个项目中发现如下

<div class="gadget_title gradient37 vertsortable_head">
  ...
</div>

我知道我可以将一个元素与一个类（单个）关联（例如<div class='gadget'></div>，但是如何关联多个值（这是什么意思）？

如何使用 css 选择器进行选择？

【问题讨论】：

这确实意味着该元素设置了多个classes，这是绝对正常和有效的。
这有助于样式的重复使用。您不必将所有样式都放在每个类中。重复使用任何需要的东西。可以像选择单个类一样选择它们。
CSS 选择器将是：div.gadget_title.gradient37.vertsortable_head。注意它们之间没有空格，所以它不会被认为是一个层次结构，而是一个组。
您可以将任意数量的类关联到您的元素。另一方面，ID 是唯一的。 以三个类别为例 -> 哺乳动物、猫和狗。给定这些类，您可以在逻辑上构建两个元素：<div class="mammal cat"></div> 和 <div class="mammal dog"></div> where .mammal{legs: 4;尾巴：1； } .cat{ 清洁度：9001; } .dog{ 清洁度：-3;因此，多个类对于通过它们相似的特征/特征组合某些元素非常有用。

标签： html css

【解决方案1】：

您可以为一个 HTML 元素分配多个类，它们将被组合起来。

您不需要将所有类都放在 CSS 选择器中，但如果您想确保元素具有所有三个类，则必须这样做。

这个元素可以这样选择

.gadget_title
{
    ...
}

OR

.gradient37
{
    ...
}

OR

.gadget_title.gradient37
{
    ...
}

OR

.gradient37.vertsortable_head
{
    ...
}

OR

.gadget_title.vertsortable_head
{
    ...
}

OR

.gadget_title.gradient37.vertsortable_head
{
    ...
}

【讨论】：