Streamlabs自定义Twitch聊天：实现消息与用户名颜色交替

你的核心问题是选错了:nth-child的作用层级——之前直接给.name或#username加伪类，但每个消息条目里的用户名都是其父元素的唯一子元素，自然不会触发交替规则。正确的做法是先选中整条消息行，再控制行内的用户名和消息文本颜色。

问题分析 #

你原有的DOM结构里，每条聊天消息是#log下的直接<div>（对应table-row），每个行里包含.meta（用户名区域）和.message（消息内容区域）。之前的选择器没有定位到「整条消息」这个层级，导致交替规则失效：

• 第一种方法：.name:nth-child(2n)永远匹配不到，因为每个.meta里只有一个.name，最终后面的颜色覆盖了前面的设置
• 第二种方法：全局的:nth-child(2n)会污染所有元素的偶数子元素，范围太广
• 第三种方法：和第一种同理，每个消息行里的#username都是唯一子元素，伪类不生效

正确实现代码 #

把以下代码添加到你原有的CSS末尾，就能实现每条消息交替颜色的效果：

/* 奇数行消息：用户名和消息设为第一种颜色 */
#log > div:nth-child(odd) .name,
#log > div:nth-child(odd) .message {
    color: #f578e4;
}

/* 偶数行消息：用户名和消息设为第二种颜色 */
#log > div:nth-child(even) .name,
#log > div:nth-child(even) .message {
    color: #75fbde;
}

如果想让用户名和消息颜色分开设置（比如奇数行用户名粉、消息青蓝，偶数行反过来），可以拆分规则：

/* 奇数行：用户名粉色，消息青蓝色 */
#log > div:nth-child(odd) .name {
    color: #f578e4;
}
#log > div:nth-child(odd) .message {
    color: #75fbde;
}

/* 偶数行：用户名青蓝色，消息粉色 */
#log > div:nth-child(even) .name {
    color: #75fbde;
}
#log > div:nth-child(even) .message {
    color: #f578e4;
}

注意事项 #

• 不要用#username这种ID选择器，因为聊天消息是动态生成的，ID会重复，改用.name类选择器即可（你原代码里已经有这个类）
• 确保规则的优先级足够：你原代码里body设置了color: {text_color}，针对.name和.message的颜色规则会覆盖全局设置

内容的提问来源于stack exchange，提问作者Ana Mendes