动态<style>标记未将样式应用于类

Question

这似乎很简单 - 但令人难以忍受的是。

＆＃xA;＆＃xA;

我为学校项目构建了一个聊天应用程序。这是.NET signalR和jquery spaghetti。这不是生产就绪代码。但是，我的非技术家庭喜欢在白天偶尔登录聊天

＆＃xA;＆＃xA;

最近流量已经足够大，我想用颜色区分用户名。因此，在向chatHub添加用户时，我运行以下内容：

＆＃xA;＆＃xA;

  var color = randomColor（{luminosity：'dark'，count：1}）; ＆＃xA; var className =“span.user-name.user”+ id.split（' - '）[0];＆＃xA; $（“＆lt; style type ='text / css'＆gt;。” + className +“{color：”+ color +“;}＆lt; / style＆gt;”）。appendTo（“head”）;＆＃xA;  

＆＃xA;＆＃xA; < p>正如你所看到的，我正在使用极端特异性。我可以看到实际的＆lt; style＆gt; 出现在我的chrome检查器中。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

不幸的是，该类似乎不会影响实际元素。这是检查员中的元素。

＆＃xA;＆＃xA;

＆＃xA;＆＃xA;

我是不完全确定 问题是什么。我尝试添加以下内容：

＆＃xA;＆＃xA;

＆＃xA;
1. 添加到＆lt; body＆gt; 而不是 ＆lt; head＆gt; 。
＆＃xA;
2. 越来越多地增加特异性。
＆＃xA;
3. 在inspector.stylesheet中更改它（在这里工作）。< / li>＆＃xA;
4. 确保我没有用数字启动任何类（CSS 2？）
＆＃xA;
5. 运行CSS验证器。
＆＃xA;

＆＃xA;＆＃xA;

我不知道还有什么可以尝试的。如果一些css忍者可以告诉我这里我做错了什么，我当然会感激。

＆＃xA;＆＃xA;

P.S。男孩这很尴尬。多谢你们！

＆＃XA;

Answer 1

构建CSS字符串的方式是在.之前插入span（这是一个标记，而不是类）。删除它，所有应该工作：

var color = randomColor({ luminosity: 'dark', count: 1 });
var className = "span.user-name.user" + id.split('-')[0];
$("<style type='text/css'>" + className + "{color:" + color + ";}</style>").appendTo("head");

Answer 2

你刚刚做过.span吗？ span不是类，请删除点.

Answer 3

删除classname之前的点，因为span是元素而不是class：

$("<style type='text/css'>" + className + "{color:" + color + ";}</style>").appendTo("head");