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：

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

Answer 2

203是无效的css类名，

类名应以字母
开头
所有CSS语法在ASCII范围内都不区分大小写（即[a-z]   和[A-Z]是等价的），除了不属于的部分   控制CSS。例如，区分大小写的值   HTML属性“id”和“class”，字体名称和URIs   超出本规范的范围。特别注意   元素名称在HTML中不区分大小写，但在XML中区分大小写。

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

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

，尝试将其更改为stepNode-203或stepNode_203。

Answer 3

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

将样式应用于：动态元素之前

3 个答案: