如何使用 class="name1 name2" 引用 div？答案

【问题标题】：How to reference a div with class="name1 name2"?如何使用 class="name1 name2" 引用 div？
【发布时间】：2011-08-11 21:12:43
【问题描述】：

我正在处理教程中的一些 CSS，一个 div 有这个类：

<div class="related products">

如何在样式表中引用它？

【问题讨论】：

【解决方案1】：

div 实际上有两个类，related 和 products。您可以在样式表中使用.related 或.products 引用它，它会从这两个规则中获取样式。例如，使用以下 CSS，您问题中 div 中的文本将显示为红色，字体大小为 12：

.related { color:#ff0000 }
.products { font-size:12px }

如果您想选择具有这两个类的元素，请在样式表中使用.related.products。例如，将以下内容添加到上面的示例中：

.related.products { font-weight:bold }

div 中的文本将接收所有三个规则，因为它匹配所有 3 个选择器。这是一个有效的example。

【讨论】：

【解决方案2】：

div.related.products是通用方法

【讨论】：

【解决方案3】：

您通过 div.related.products 引用它，字面意思是“具有相关类别和产品类别的 div”。

或者，您可以使用 either 类名来引用它，因为它会同时捕获两者。

【讨论】：

【解决方案4】：

在 css 中，只需将 div 的名称类通过这样做：

.related products {
/*styling to go here*/
}

现在相关产品类中的任何样式都将应用于该 div。

【讨论】：