Question

我目前正在开发游戏的角色数据库。关于所有字符的字符数据和信息都是用JavaScript编写的，前端设计是用CSS编写的。每个角色都有某些属性（攻击，hp，恢复等）。我关注的是他们的明星。他们的星星指的是它们的罕见（1星=非常普通; 6星=非常罕见）。该游戏最近推出了一种超级进化技术，其中6星级角色可以成为6星级+（读作6星级以上）角色。这就是我的问题所在。我知道JavaScript会运行得很好，我知道我的问题在于CSS。请看下面的代码。

这是其中一个角色的JavaScript：

[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6_plus", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],

和CSS一起使用它：

.stars-6_plus:before { color: #00bfff; content: '\2605\2605\2605\2605\2605\2605\002B'; }

理想情况下，我会将JavaScript更改为6+而不是6_plus和CSS以相同的方式，但我无法弄清楚如何做到这一点。我不确定是否有办法按照我希望的方式去做。有人告诉我，也许我可以做一个条件，当它读6_plus时它会说6+，但我不确定这是否可能。我真的很感激一些帮助。

提前致谢。

P.S。如果你想亲自检查一下，这里有一个数据库链接：

http://optc-db.github.io/characters/#/search/

Answer 1

这适用于您的班级示例。

*[class~="stars-6+"]:before{color:#00bfff; content:'\2605\2605\2605\2605\2605\2605\002B'; }

和html

<div class="stars-6+">
Hello
</div>

javascript很简单，没什么特别的。

[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6+", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],

CSS中的伪元素

1 个答案: