【问题标题】:Pseudo Elements in CSSCSS中的伪元素
【发布时间】:2017-10-05 07:41:24
【问题描述】:

我目前正在研究游戏的角色数据库。所有字符的字符数据和信息都是用 JavaScript 编写的,前端设计是用 CSS 编写的。每个角色都有特定的属性(攻击、生命值、恢复等)。我关注的是他们的Stars。他们的星星是指他们的稀有性(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/

【问题讨论】:

  • jQuery 在字符串中查找字符串的方法:if (str.indexOf("Yes") >= 0)。找到字符串后,您可以继续使用replace()
  • 您的意思是将“6_plus”更改为“6+”,将 .stars-6_plus 更改为 .stars-6+?后者不起作用,因为 + 是选择器中具有特定含义的特殊字符。你能展示一下具体渲染每组星星的代码吗?
  • @BoltClock 我认为更新就是您所指的。理想情况下,五加之一也会改变
  • 对不起,我的意思是把每个字符数据对象渲染成 HTML 的 JavaScript。
  • @BoltClock 会用 JavaScript 还是 HTML 编写?我一直在查看大量文件以尝试找到您要的内容,但无济于事。我对 JavaScript 和 CSS 都很陌生。我只是“成功”了,因为我复制了已经存在的内容以添加到其中。我知道我可能不应该问,但我认为如果你能帮助我找到你想要的东西,我们可以更快地解决这个问题。数据库管理员说它应该在字符文件夹中的一个 HTML 中。这是链接:github.com/optc-db/optc-db.github.io。希望你能找到它。

标签: javascript css css-selectors pseudo-element


【解决方案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 ],

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-03-31
    • 2016-05-02
    • 1970-01-01
    • 2023-03-22
    • 1970-01-01
    • 1970-01-01
    • 2013-10-26
    • 2015-03-08
    相关资源
    最近更新 更多