什么 CSS 代码为该页面上徽章计数旁边的项目符号赋予颜色？

Question

本页徽章相关项目符号的颜色是如何编码的？

我认为这是 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 开发工具并单击带有 class badgecount 的第一行，我会看到这些 CSS、

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

和其他两个类似的代码，它解释了 3 个徽章计数的颜色 numbers，因为 .badge1+.badgecount 与紧随其后的计数相匹配子弹，而不是子弹本身。

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

那么子弹的颜色是从哪里来的呢？

Answer 1

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

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

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

什么 CSS 代码为该页面上徽章计数旁边的项目符号赋予颜色？

What CSS code gives colors to the bullet beside the badge counts on this page?

html

css

colors

css-selectors

stackexchange