如何设置UTF箭头的样式➤

Question

我在网站上放置了UTF箭头＆＃10148，我有两个问题：

1. 如何设置颜色？

2. 我可以将其旋转为向上箭头吗？ 我在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代码中选择哪种颜色，颜色始终默认为鲑鱼色，这与其他页面元素不同，我希望它向上，而不是正确。

感谢您对此的任何帮助。

Answer 1

UTF字符是文本，因此color属性正确。 必须有一条规则以更高的特异性应用鲑鱼色。

您可以在浏览器的开发工具中使用检查器来查找哪个CSS规则覆盖了您的a.UTF_uparrow选择器。 检查“ 计算”选项卡，该选项卡按特异性顺序列出了应用于所选元素的所有规则。

 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字符的外观因用户的操作系统而异，因此无论如何您都不会获得与它们一致的外观。

Answer 2

添加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>