可以帮我一下 CSS 选择器吗？

[Turtle]

嘿，
由于聊天中没有盾牌图标或任何表明用户是员工的指示，我想稍微改变一下他们的用户名颜色。我找到了选择器，但在如何选择员工用户方面遇到了麻烦。这是我目前拥有的：

.chat-message-info__username__name {
  color:  #c3e7eb;
}

有什么方法可以实现这个功能吗？如果可以，该怎么做？谢谢！

[Arkshine]

您可以使用：

.chat-message-info__username.is-staff {
  .chat-message-info__username__name {
     color:  #c3e7eb;
  }
}

[Turtle]

谢谢！好吧，真不敢相信我错过了。

[Turtle]

还有一个问题。四级信任用户的东西会是什么？
为了澄清，我也想为四级信任用户做类似的事情。我找不到它的选择器。

[Arkshine]

从我看到的代码来看，您可能会看到以下类名：

• is-staff
• is-admin
• is-moderator
• is-new-user
• group--primary_group_name

您可以创建一个组并将其设置为主要组。
您还可以使用一些代码来添加缺失的类名。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Add the groups you wants to add
  const allowedGroups = ["trust_level_4"];

  api.modifyClass("components:chat/message/info", () => {
    return class extends SuperClass {
      @service currentUser;

      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`)
          .join(" ");

        return super.usernameClasses + " " + allowedGroupClasses;
      }
    };
  });
});

然后，您可以使用 CSS 目标定位 .group--trust_level_4。

示例：

.chat-message-info__username.group--trust_level_4 {
    .chat-message-info__username__name {
        color: blue;
    }
}

对于用户名，您不需要上面的代码：

.chat-message-info__username.[data-user-card="username_here"]  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

group--trust_level_4

我能选择一个特定的用户名而不是信任等级四吗？顺便说一句，非常感谢，这是一个写得很好的回复。

抱歉提问，我对代码不太在行。

[Arkshine]

我已经更新了上面的代码。
它将包含带有 .user--username 的用户名。
请注意，如果您愿意，也可以使用 ID。

[Turtle]

当然可以，例如，更改我的用户名的颜色：

[Arkshine]

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

嗯，这对名叫 Kat_Mac 的用户不起作用？

.chat-message-info__username.user--kat_mac  {
    .chat-message-info__username__name {
        color: red;
    }
}

我已经更新了 JS。

[Arkshine]

如果用户名是“Kat_Mac”，那么 CSS 应该是 user--Kat_Mac。

[Turtle]

嗯，我还是无法让它正常工作。我需要在 JS 部分包含的用户名是 Kat_Mac，对吗？

[Arkshine]

不，不要更改 JS。如果你指的是 includeUsersField，那么它的意思是你想通过“用户名”（例如 Kat_Mac）还是“ID”（例如 4）来显示。如果你想显示用户名，请保持原样。

[Turtle]

无论如何，它仍然不起作用。不过，感谢您的帮助。

[Arkshine]

对我来说是有效的：

请确保您使用的是最新的 JS 代码，并且已正确更新 CSS！

---

@Turtle 忽略我的代码，实际上我没有看到那里有一个可以使用的用户名的属性。

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

这就是我所拥有的。

我不知道可能是什么问题。

[Arkshine]

使用此 CSS：

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

管用，谢谢！