0

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

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

<div class="-badges">
  <span title="5 gold badges" aria-hidden="true">
    <span class="badge1">●&lt;/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">●&lt;/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">●&lt;/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 中的“计算”选项卡，该color属性具有 value rgb(61,61,61)。

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

4

1 回答 1

1

您看到的不是 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 项目符号本身没有颜色。

于 2021-05-01T18:06:23.980 回答