动态应用样式到 :before Element答案

【问题标题】：Applying Styling to :before Element Dynamically动态应用样式到 :before Element
【发布时间】：2014-07-19 19:05:12
【问题描述】：

我需要为 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>

任何想法如何解决这个问题？如果样式是动态添加的，我是否需要做任何事情来重新应用样式？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

引用the spec:

在 CSS 中，标识符（包括元素名称、类和 ID 选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_); 不能以数字开头、两个连字符或一个连字符后跟一个数字。

【讨论】：

【解决方案2】：

203 不是有效的 css 类名，

类名应以字母开头

所有 CSS 语法在 ASCII 范围内都不区分大小写（即 [a-z] 和 [A-Z] 是等效的），除了不属于控制CSS。例如，值的大小写敏感性 HTML 属性“id”和“class”、字体名称和 URI 谎言本规范范围之外。特别注意元素名称在 HTML 中不区分大小写，但在 XML 中区分大小写。

在 CSS 中，标识符（包括元素名称、类和 ID）选择器）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_);它们不能以数字、两个连字符或后面的连字符开头一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（参见下一项）。例如，标识符“B&W？”可以写成“B\&W\?”或“B\26 W\3F”。

参考http://www.w3.org/TR/CSS2/syndata.html#characters

, 尝试将其更改为 stepNode-203 或 stepNode_203 之类的。

【讨论】：

【解决方案3】：

我猜你不能有整数类！我将班级名称更改为 step_203 而不是 203，并且我能够让我的代码正常工作。

【讨论】：