Javascript 如何使用CSS在img标签上替换CSS样式？

我正在尝试设计一个聊天记录窗口。来自json文件的数据。我能够很好地获得输出，但我想在聊天区上交替对齐。例如，User1消息显示为“IMG”-“message”User2消息显示为“message”-“IMG”。 我试过使用第n个child和第n个类型，但都没有给出我想要的结果。 任何帮助都将不胜感激

聊天记录

这是JS

fetch（url）
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
const myData=data.data；
const d=新日期（myData.conversationDate）；
document.getElementById（'chatDate'）.innerHTML=矩（d）.format（'dddddd，MMMM DD，YYYY'）；
让html=''；
对于（i=0；i
${myData.messages[i].username}${moment（messageTime）.format（'h:mm a'）}
`;
document.getElementById（'newData'）。innerHTML=html；
//document.getElementById（“userImage”）.src=myData.messages[i].image；
//document.getElementById（“message”）.innerHTML=myData.messages[i].message；
}
});

这是css

.grid容器{
显示：网格；
网格模板列：自动；
边框：1px纯绿色；
栅柱间隙：100px；
}
.表格项目{
边框：1px纯红；
}
#查塔蒂{
字体系列：RobotoReg；
尺寸：18px；
颜色：#999；
文本对齐：右对齐；
}
.包装纸{
边框：1px实心#000；
盒影：10px 10px 5px灰色；
保证金：0自动；
宽度：500px；
填充：20px；
背景色：#fff；
}
.集装箱{
/*边框：2倍实心#深底*/
背景色：#fff；
盒影：10px 10px 5px灰色；
边界半径：5px；
填充：10px；
利润率：10px0；
}
.聊天室{
背景色：#999；
}
a{
文字装饰：无；
颜色：#000；
}
.容器a：焦点{
边框颜色：#ccc；
背景色：#ddd；
盒影：无；
}
/*样式图像*/
img{
边界半径：50px；
最大宽度：60px；
左边距：0px；
右边距：0；
}
img：第n种类型（奇数）{
边框：1px灰红色；
浮动：左；
右边距：20px；
}
img:n个类型（偶数）{
浮动：对；
左边距：20px；
}
/*清除浮动*/
.容器：：之后{
内容：“；
明确：两者皆有；
显示：表格；
}

Mygel van Trabel下午1:41


Charlie Hemn下午1:46


Mygel van Trabel下午1:50


Charlie Hemn下午2:03

您能否提供js运行后呈现的输出html？几个消息和它们的容器就足够了。添加了呈现的HTML到post。第n个类型不只是兄弟姐妹吗？所以可能：

div:nth类型（奇数）img{}

明白了！最后成为div.container:n类型（奇数）img谢谢@John Hascall！！