React项目中img标签通过class/id绑定的CSS样式不生效如何解决

问题原因 #

该样式失效问题是CSS语法错误导致后续规则无法被浏览器正常解析，具体错误点有两个：

• #TopHeading 选择器对应的样式块，闭合大括号}后多写了一个多余的分号;。CSS规范中规则块结束后不允许添加额外分号，该错误会直接阻断后续所有样式规则的解析。因为语法错误出现在#TopHeading规则之后，所以该div的样式可以正常生效，之后的.image1和.aDiv的样式规则全部无法被识别，就出现了img样式不生效的现象。
• .aDiv的样式块缺少闭合大括号}，进一步加剧了样式解析异常。

解决方法 #

将你的CSS文件修正为如下写法即可：

#TopHeading{
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: rgb(131, 192, 131);
    height: 300px;
}

.image1{
    border-style: solid;
    width: auto; 
    height:250px;
}

.aDiv{
    size: 50px;
    border-style: solid;
}

修正后刷新页面，.image1对应的img标签样式即可正常生效。

内容的提问来源于stack exchange，提问作者Willem. R. Nieuwenhuis