javascript - 将样式应用于 :before Element Dynamically

Question

我需要给 before: 元素动态添加样式。

在我的页面上，我有以下容器

<p class="stepNode 203"></p>

我动态地向页面添加样式以为此元素设置背景图像:

  $('head').append('<style> .stepNode.'+node_id+':before {background: url("'+$(divs[k]).data('image')+'");}</style>');

产生:

<style>
 .stepNode.203:before {background: url("http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg");}
</style>

但在检查元素时，此样式从未应用。

值得注意的是，当我更改样式以排除数字类时，背景会正确应用:

<style>
 .stepNode:before {background: url("http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg");}
</style>

有什么办法可以解决这个问题吗？如果样式是动态添加的，我是否需要执行任何操作来重新应用样式？

Answer 1

CSS 类名不能以数字开头。类 203 和 -203 无效，但 _203 是一个有效的替代方案。

---

引自 the spec :

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.