Question

我用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文章'，以便它可以有一种类型的私人消息样式和一种类型的公共消息。这似乎是常见的事情，但我无法找到有关它的信息。感谢。

Answer 1

不是一个Java人，但听起来你想给每个新节点你渲染一个类，并在CSS中设置样式：

.firstClassName {
    color: red;
}

.secondClassName {
    color: blue;
}

Answer 2

我会使用以下选项之一：

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

2）为每种情况设置样式属性，例如

<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帮助，请与我们联系。

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

2 个答案: