什么 CSS 代码为此页面上徽章计数旁边的项目符号提供颜色？

如何解决什么 CSS 代码为此页面上徽章计数旁边的项目符号提供颜色？

此页面中与徽章相关的项目符号的颜色是如何编码的？

我认为这是 HTML 的相关部分：

<div class="-badges">
  <span title="5 gold badges" aria-hidden="true">
    <span class="badge1">●</span>
    <span class="badgecount">5</span>
  </span>
  <span class="v-visible-sr">5 gold badges</span>
  <span title="27 silver badges" aria-hidden="true">
    <span class="badge2">●</span>
    <span class="badgecount">27</span>
  </span>
  <span class="v-visible-sr">27 silver badges</span>
  <span title="58 bronze badges" aria-hidden="true">
    <span class="badge3">●</span>
    <span class="badgecount">58</span>
  </span>
  <span class="v-visible-sr">58 bronze badges</span>
</div>

但是，如果我打开 Chrome 开发工具并单击带有类 badgecount 的第一行，我会看到这些 CSS，

.top-bar .my-profile .-badges .badge1+.badgecount {
    color: var(--gold-darker);
}

以及其他两个类似的代码，它解释了 3 个徽章计数的数字的颜色，因为 .badge1+.badgecount 匹配紧跟在项目符号后面的计数，而不是子弹本身。

那么子弹呢？如果我点击带有 badge1 类的行，我看不到任何与颜色相关的样式。事实上，如果我转到 devtools 中的“Computed”选项卡，color 属性的值是 rgb(61,61,61)。

那么子弹从哪里获得颜色？

解决方法

您看到的不是 Unicode 项目符号本身，而是精灵表的一部分。 HTML 中的 Unicode 项目符号本身使用以下规则隐藏：

.top-bar .my-profile .-badges .badge1,.top-bar .my-profile .-badges .badge2,.top-bar .my-profile .-badges .badge3 {
    text-indent: -9999em;
}

并替换为精灵表，为每种徽章类型放置不同的位置以显示正确的颜色。 Unicode 项目符号本身没有颜色。