新手做前端页面，经常碰到样式改了不生效，怎么刷新都不对，今天把最常见的样式不生效的原因和解决办法列出来，看完再也不卡壳。
1. 浏览器缓存
最常见的原因，浏览器会缓存CSS文件，你改了style.css，但是浏览器还是用之前缓存的旧文件，刷新页面也没用。这时候按Ctrl+F5强制刷新，清掉当前页面的缓存，就能看到新样式了。
调试的时候，直接打开Chrome开发者工具，在Network面板里勾选"Disable cache"，开发者工具开着的时候，浏览器不会缓存CSS，改完立刻就能看到效果。
2. 选择器优先级不够
你写的样式被后面的样式覆盖了，比如你写.header {color: red;}，但是后面又有个body .header {color: blue;}，后面的选择器优先级更高，你的红色就不生效。
用Chrome开发者工具，点你要改的元素，看右侧的样式面板，哪个样式被划掉了，就是被覆盖了。把你的选择器写得更具体，比如加个父级类名，提高优先级，就能盖过默认样式。
3. CSS文件没引入对
你改了半天style.css，结果页面里引入的是另一个css文件，改的文件根本没在页面里加载，当然不生效。看一下页面源码，确认你改的那个CSS文件，是不是在head里正确引入了，路径对不对，有没有404。
很多新手把CSS文件放错文件夹，路径写错了，浏览器根本加载不到这个文件，改再多也没用。
4. 样式写错了
比如少写了冒号、分号，或者属性名写错了，浏览器不认这个样式，自然不生效。看开发者工具里的样式，浏览器会把不认识的样式标红，一眼就能看到哪里写错了。
5. 父级元素有样式继承
你给子元素写了样式，但是父级元素有更高优先级的样式覆盖了它，这时候要么提高子元素的优先级，要么直接把样式写在父级上，别跟继承的样式较劲。
碰到样式不生效，别瞎改，先打开开发者工具，看元素的实际样式，浏览器会告诉你哪里出了问题，比你猜半天快多了。
本站源码来源于网络收集修改或者交换，甚至可能并非原创，如遇未经考证信息需持审慎态度。若有疑问，可联系本站处理。