仅用CSS区分同class的徽章与用户名元素实现自定义样式

一、CSS区分徽章容器与用户名元素 #

两个span.name的核心差异是是否包含img标签，可通过以下两种方式精准区分：

方法1：利用:has()伪类（推荐，兼容性较好） #

:has()能选中包含指定子元素的父元素，刚好用来区分带徽章的容器和纯用户名元素：

/* 选中包含徽章图片的.name容器，设置隐藏或自定义样式 */
.name:has(img) {
  /* 彻底隐藏且无布局残留 */
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  /* 若无需隐藏，仅调整间距可替换为：
  margin-right: 8px;
  */
}

/* 选中纯用户名的.name元素，自定义样式 */
.name:not(:has(img)) {
  color: #ffd700; /* 示例：设置用户名金色 */
  font-weight: 600;
}

方法2：利用位置选择器（依赖固定HTML结构） #

若徽章容器始终在用户名元素之前，可使用位置选择器区分：

/* 第一个.name元素（徽章容器） */
.name:first-of-type {
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 第二个.name元素（用户名） */
.name:last-of-type {
  color: #2ecc71; /* 示例：设置用户名绿色 */
  font-size: 1.1em;
}

二、解决徽章隐藏后的样式残留问题 #

你之前仅隐藏了img标签，但父容器span.name可能自带padding、margin等样式导致残留，需同时清除容器的布局属性：

/* 隐藏所有徽章图片 */
img[alt~="broadcaster"],
img[alt~="subscriber"],
img[alt~="premium"] {
  display: none;
}

/* 清除徽章容器的布局残留 */
.name:has(img) {
  padding: 0;
  margin: 0;
  border: none;
  line-height: 0;
}

三、推荐其他聊天合并平台 #

• StreamElements：支持Twitch+Youtube聊天合并，Youtube消息延迟表现更稳定，支持自定义CSS/HTML，自由度高。
• Chatty：桌面端独立聊天工具，可同时连接Twitch和Youtube账号合并聊天，界面样式可自定义调整。
• OBS第三方插件：比如「Twitch & YouTube Chat Merge」插件，直接在OBS中加载使用，支持基础样式配置。

内容的提问来源于stack exchange，提问作者F.Griman