自定义CSS参考

自定义CSS参考

本文介绍了blivechat评论栏中的HTML元素，以及用CSS选择器选中它们的常见方法，供编写自定义CSS时参考

以blc-开头的名称是blivechat自己添加的，原版YouTube评论栏没有这些名称

文本消息

文本消息指的是用户发送的弹幕，其内容可能包括文本和表情图片

标签：yt-live-chat-text-message-renderer

属性：

• author-type：作者类型，取值有

  • （空文本）——普通用户
  • member——舰队成员
  • moderator——房管
  • owner——主播

  优先级：主播 > 房管 > 舰队成员 > 普通用户

• blc-guard-level：作者的舰队等级，取值有

  • 0——非舰队成员
  • 1——总督
  • 2——提督
  • 3——舰长

  （不要问我为什么是倒序的，B站就是这么定的。）v1.9新增

头像参考下文

内容卡片

包括头像以外的部分

ID：content

时间ID：timestamp

作者卡片参考下文

具体内容

包括具体的文本和图片

ID：message

表情类：emoji

尺寸（高度）较大的表情额外包含的类：blc-large-emoji。添加这个类是为了分别设置大表情和小表情的尺寸。B站有不同尺寸的表情，如果都用CSS设置为同一尺寸，会比较违反用户习惯。v1.9新增

表情尺寸建议只设置高度，然后宽度设置为auto

付费消息

付费消息包括Super Chat（醒目留言，简称SC）和礼物消息

标签：yt-live-chat-paid-message-renderer

属性：

• show-only-header：只显示头部，不显示内容
• blc-price-level：金额等级，取值从低到高为0到7，0为免费礼物。v1.9新增

CSS变量：

• --yt-live-chat-paid-message-primary-color：内容背景色
• --yt-live-chat-paid-message-secondary-color：头部背景色
• --yt-live-chat-paid-message-header-color：头部颜色
• --yt-live-chat-paid-message-author-name-color：作者名颜色
• --yt-live-chat-paid-message-timestamp-color：时间颜色
• --yt-live-chat-paid-message-color：内容颜色

卡片ID：card

头部

包括头像、作者名、金额、时间

ID：header

头像参考下文

头像以外部分ID：header-content

作者名+金额部分ID：header-content-primary-column

作者名ID：author-name

金额ID：purchase-amount

时间ID：timestamp

内容卡片

ID：content

具体内容ID：message

大航海消息

大航海消息指购买舰长消息，包括新上舰和续费的

标签：yt-live-chat-membership-item-renderer

属性：

• show-only-header：只显示头部，不显示内容。目前一定会有这个属性，因为没有要显示的内容
• blc-guard-level：购买的舰队等级，取值参考上文。v1.9新增

CSS变量：

• --yt-live-chat-sponsor-color：背景色，只在只显示头部时生效
• --yt-live-chat-sponsor-text-color：作者名颜色

卡片ID：card

头部

包括头像、作者卡片、头部文本、时间

ID：header

头像、作者卡片参考下文

头像以外部分ID：header-content

作者卡片容器+头部文本部分ID：header-content-primary-column

作者卡片容器ID：header-content-inner-column

头部文本ID：header-subtext

时间ID：timestamp

付费消息固定栏

这个应该很少有自定义需求，就不写细节了

标签：yt-live-chat-ticker-renderer

消息标签：yt-live-chat-ticker-paid-message-item-renderer

消息头像参考下文

消息内容ID：text

---

以下是公共组件

头像

头像可能出现在各种消息中，结构都是一样的，里面只有一个img元素

标签：yt-img-shadow。不建议用标签选中头像，因为在YouTube中这个标签也被用于头像以外的地方

ID：author-photo

作者卡片

标签：yt-live-chat-author-chip

勋章容器ID：chat-badges

作者名

ID：author-name

类：

• member：如果是在大航海消息中则会有这个类，否则没有

YouTube在这个部分还有个已验证勋章，blivechat则没有用到

勋章

标签：yt-live-chat-author-badge-renderer

属性：

• type：勋章类型，取值有

  • member——舰队成员
  • moderator——房管

图片容器ID：image

舰长勋章是用img元素显示的，而房管勋章是用svg元素