动态地对:before元素应用样式

Applying Styling to :before Element Dynamically

本文关键字：元素 应用 样式 before 动态      更新时间：2023-09-26

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

有什么办法解决这个问题吗?如果它是动态添加的，我需要做任何事情来重新应用样式吗?

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

引用自规范:

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

203是无效的CSS类名，

类名应该以字母

开头

所有CSS语法在ASCII范围内(即[a-z])不区分大小写。和[A-Z]是相等的)，除了不在控制CSS。的值的大小写敏感性HTML属性"id"answers"class"，字体名称和uri超出了本规范的范围。特别要注意元素名在HTML中不区分大小写，但在XML中区分大小写。

在CSS中，标识符(包括元素名、类和id)选择器)只能包含字符[a-zA-Z0-9]和ISO 10646字符U+00A0及以上，加上连字符(-)和下划线(_);它们不能以数字、两个连字符开头，也不能后跟一个连字符差一个数字。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(见下一项)。例如,标识符"B&W?"可以写成"B'&W'?"或"B' 26w '3F"。

引用http://www.w3.org/TR/CSS2/syndata.html字符

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

我猜你不能有整数类!我将类名改为step_203，而不是203，这样我的代码就可以正常工作了。

相关文章：