HTML/CSS：如何为不同类型的文章制作“文章”的多个“版本”答案

【问题标题】：HTML/CSS: How to make multiple 'versions' of an 'article' for different types of articlesHTML/CSS：如何为不同类型的文章制作“文章”的多个“版本”
【发布时间】：2018-11-15 09:54:12
【问题描述】：

我用 Java 制作了一个聊天应用程序，并在前端使用了 javascript、HTML 和 CSS。对于该应用程序，您可以发送公开或私人消息。 javascript 从文本框中获取消息并将其发送到服务器，然后服务器从中生成 HTML 消息并将其作为呈现的文章返回。

我想让公共和私人消息以不同的颜色显示，以便于区分它们。

这是被调用以呈现公共消息的函数：

   private static String createHtmlMessageFromSender(String sender, String message) {
        return article(
                b(sender + " says:"),
                span(attrs(".timestamp"), new SimpleDateFormat("HH:mm:ss").format(new Date())),
                p(message)
        ).render();
    }

这个被调用来呈现一条私人消息：

private static String createHtmlMessageFromSenderPrivate(String sender, String message) {
    return article(
            b(sender + " says to you:"),
            span(attrs(".timestamp"), new SimpleDateFormat("HH:mm:ss").format(new Date())),
            p(message)
    ).render();
}

我对 HTML 和 CSS 还是很陌生。私人和公共消息都被呈现为“文章”并放入名为“聊天”的 div 对象中。我不知道是否可以在我的 CSS 文件中创建两个不同的“#chat article”“版本”，以便它可以有一种类型的私人消息样式和一种类型的公共消息。这似乎是一件很常见的事情，但我找不到有关它的信息。谢谢。

【问题讨论】：

标签： javascript java html css web-applications

【解决方案1】：

不是 Java 人，但听起来你想为每个新节点提供一个类，并在 CSS 中设置它的样式，如下所示：

.firstClassName {
    color: red;
}

.secondClassName {
    color: blue;
}

【讨论】：

你是怎么做到的？我从来没有听说过 CSS 上下文中的课程（我是一名计算机科学专业的学生，这个项目是随机分配的）
CSS 不像 PHP / Java 那样使用“类”。类更像是您希望以类似方式设置样式的对象“类”的名称。 w3schools.com/CSSref/sel_class.asp
刚刚研究如何在 Java 中分配 CSS 类，但不确定我能提供多少帮助。这是：stackoverflow.com/questions/37499885/javafx-css-class-style

【解决方案2】：

我会使用以下选项之一：

1) 使用 2 个不同的 ID（例如 #chat 和 #privatechat），您可以在 CSS 中为一个或另一个设置不同的颜色。

2) 为每个案例设置一个 style 属性，例如

<div id="chat" style="background-color:#ababab">private</div>

或

<div id="chat" style="background-color:#cecece">public</div>

3) 使用 Sass (https://sass-lang.com/) 来控制您的样式表。 Sass 允许您在样式表中使用条件语句。

如果您需要更多 HTML 帮助，请告诉我。

【讨论】：