代码之家 › 专栏 › 技术社区 › RTC222

如何设置UTF箭头&#10148的样式

html5 css

1

RTC222 · 技术社区 · 7 年前

我把UTF arrow&10148放在我的网站上,我有两个问题:

我该如何设置颜色?
我能把它转成上箭头吗?在UTF箭头中,我看不到与&10148相同的向上箭头样式。

下面是我现在使用的代码:

a.UTF_uparrow {
  font-size: 15pt;
  color: rgb(140, 173, 255);
}

<a href="#bkmkAA" class="UTF_uparrow" style="text-decoration: none">&#10148;</a>

不管我在css代码中选择什么颜色,颜色总是默认为鲑鱼色,这与其他页面元素不同,我希望它指向上,而不是正确的。

谢谢你的帮助。

2 回复 | 直到 7 年前

1

zer00ne 7 年前

添加 display:inline-block 或 block 然后 transform:rotate(-90deg); . 颜色是正确的…你在这个演示中还看到鲑鱼的颜色吗?如果不是,则通过尝试 !important (不推荐)或连锁类以获得更高的特异性,如:

a.UTF_uparrow.UTF_uparrow.UTF_uparrow {...

a.UTF_uparrow {
  display: inline-block;
  font-size: 15pt;
  color: rgb(140, 173, 255);
  transform: rotate(-90deg);
}

a.small {
  font-size: 7pt;
}

<a href="#bkmkAA" class="UTF_uparrow" style="text-decoration: none">&#10148;</a>

<a href="#bkmkAA" class="UTF_uparrow small" style="text-decoration: none">&#10148;</a>

2

1

jme 7 年前

UTF字符是文本,因此 color 属性正确。一定有一个规则用鲑鱼的颜色 specificity .

你可以使用 Inspector 在浏览器的开发工具中查找哪个CSS规则正在覆盖 a.UTF_uparrow 选择器。检查 Computed 选项卡,按特定性顺序列出应用于选定元素的所有规则。

a.UTF_uparrow{
    font-size: 15pt;
    color: rgb(140,173,255);
}

<a href="#bkmkAA" class="UTF_uparrow" style="text-decoration: none">&#10148;</a>

关于查找向上箭头,我建议您查找适当的UTF字符,而不是尝试旋转此箭头。如果您不喜欢任何UTF字符的外观,可以尝试使用图标字体。您还应该注意,UTF字符根据用户的操作系统而不同,因此在任何情况下都无法实现与它们一致的外观。