JavaScript动态插入HTML元素后，CSS样式不生效如何解决？

嘿，我一眼就发现问题所在了——你的CSS选择器写得不对！

问题根源 #

你通过JS动态插入的是带有ID的<h2>标签，比如：

<h2 id='rightAnswer'> You made a palindrome!</h2>

但你的CSS选择器写的是：

#wrongAnswer h2{ color: red; } 
#rightAnswer h2{ color: green; }

这个选择器的意思是：找到ID为wrongAnswer的元素，然后选中它内部的所有<h2>标签。但实际上wrongAnswer和rightAnswer本身就是<h2>的ID，根本没有嵌套结构，所以浏览器找不到匹配的元素，样式自然不生效。

修正后的CSS #

把选择器改成直接针对ID本身就行：

#wrongAnswer { color: red; } 
#rightAnswer { color: green; }

关于你的核心疑问 #

当然可以通过CSS文件定位JavaScript动态插入的元素ID！只要元素被成功插入到DOM中，浏览器就会像识别静态HTML元素一样识别它的ID、类名等属性，完全不需要依赖内联样式，你的这个思路是完全正确的，只是这次栽在了选择器的写法上。

小技巧：以后遇到样式不生效的问题，可以按下F12打开浏览器开发者工具，查看目标元素的样式面板，就能直观看到你的CSS规则有没有被命中，排查问题会高效很多。

内容的提问来源于stack exchange，提问作者David Reke