javascript - CSS 中的伪元素

标签 javascript css css-selectors pseudo-element

我目前正在处理游戏的 Angular 色数据库。所有 Angular 色的 Angular 色数据和信息都是用JavaScript编写的,前端设计是用CSS编写的。每个 Angular 色都有特定的属性(攻击、HP、恢复等)。我关注的是他们的 Stars。他们的星星是指它们的稀有性(1 颗星 = 极其常见;6 颗星 = 极其罕见)。该游戏最近引入了一种 super 进化技术,其中6星 Angular 色可以成为6星+(读作6星以上) Angular 色。这就是我的问题所在。我知道 JavaScript 可以正常工作,而且我知道我的问题出在 CSS 中。请看下面的代码。

这是其中一个 Angular 色的 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/

最佳答案

这应该适用于您的类示例。

*[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 ],

关于javascript - CSS 中的伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43828407/

相关文章:

.net - 如何使用 javascript 遍历 ASP .NET 文本框并计算值?

css - 如何在使用 webpack 时覆盖 css 框架的样式?

javascript - jquery 关闭 ('scroll' ) 不工作

html - 具有不同 <li> 高度的内联导航中的 100% 高度链接

javascript - JavaScript 中的通用按钮处理程序

javascript - 本地图滚动到 View 中时动画谷歌地图标记

java - 尝试在 Flipkart 上查找 'Unable to locate element' 按钮时出现错误 'Add to Cart'

css - 手写笔选择器内部的过滤

html - 是否可以选择前面没有文本的元素?

javascript - CSS 显示 :inline prevents element from refreshing