这似乎很简单 - 但它却非常令人沮丧。
我为一个学校元素构建了一个聊天应用程序。它是 .NET signalR 和 jquery 意大利面条。这不是生产就绪代码。然而，我的非技术家庭偶尔喜欢在白天登录它聊天
最近流量增加了很多，我想用颜色来区分用户名。因此，在将用户添加到 chatHub 时，我运行如下操作:
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");
如您所见，我使用了极端的特异性。我可以看到实际的 <style>出现在我的 chrome 检查器中。
不幸的是，这个类似乎并没有影响实际的元素。这是检查器中的元素。
我不完全确定问题是什么。我尝试添加以下内容:
- 添加到
<body>而不是<head>. - 特异性越来越强。
- 在 inspector.stylesheet 中更改它(在此处有效)。
- 确保我没有以数字开始任何类(class)(CSS 2？)
- 通过 CSS 验证器运行。
我不知道还能尝试什么。如果某些 CSS 高手能告诉我我在这里做错了什么，我将不胜感激。
附言男孩，这很尴尬。多谢你们!
最佳答案
构建 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");
关于javascript - 动态 <style> 标签未将样式应用于类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38774588/