React中index.css样式优先级高于app.css的原因咨询

这大概率是下面几个原因导致的：

• CSS文件的加载顺序
  浏览器解析CSS是严格按照HTML里引入文件的顺序来的，后加载的文件里，同优先级的样式会覆盖先加载的。如果你的HTML里是先引入app.css，再引入index.css，那index里的.class样式自然会把app里的覆盖掉。比如：

  <link rel="stylesheet" href="app.css">
  <link rel="stylesheet" href="index.css">
  

  这种情况下，最后渲染的背景色就是red。

• 选择器优先级差异
  虽然你说两个都是.class，但如果index.css里的选择器实际优先级更高（比如加了父元素限定，写成header.class或者#container .class），那就算加载顺序靠后或者靠前，优先级高的样式都会生效。不过你这个例子里如果都是纯类选择器，这条可以先排除。

• !important 强制覆盖
  如果index.css里的样式加了!important声明，比如：

  .class {background-color: red !important;}
  

  那不管加载顺序如何，这个样式都会强制覆盖其他没加!important的同属性样式。除非app.css里也加了!important且是后加载的，才会反过来覆盖。

• 文件未正确引入或缓存问题
  先检查app.css的引入路径是否正确，有没有拼写错误导致浏览器没加载到这个文件。另外，浏览器可能缓存了旧的app.css内容，按Ctrl+F5强制刷新页面，看看app里的样式会不会生效。

内容的提问来源于stack exchange，提问作者mr bean bangla funny dubing