我的 CSS 没有改变，为什么？答案

【问题标题】：My CSS doesn't change, why?我的 CSS 没有改变，为什么？
【发布时间】：2018-11-21 00:06:30
【问题描述】：

所以几周后，我重新开始编码，但遇到了问题。

我正在处理的项目包含 PHP 网站的基本内容，现在我正在尝试重新设计我的主页。

问题是，每次我删除或更改 CSS 中的某些内容时，设计永远不会像冻结或其他什么一样发生变化，并且每个页面都会发生这种情况。当我在我的 HTML 中删除指向 CSS 的链接时，设计就消失了。代码如下：

var scrolled=0;
    $(document).ready(function() {
        $("#master").click(function() {
            $("#holder").slideToggle('slow');
        });
                
        $("#down").on("click" ,function() {
            scrolled=scrolled+300;
            $("#solut").animate({
                scrollTop: scrolled
            });
        });
    });

@font-face {
      font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
      src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    body {
        margin: 0;
        padding: 0;
        background-color: #e0e0e0;
        overflow-x: hidden;
    }
    .navbar {
        width: 100%;
        height: 60px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="assets/logo.png" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
    </head>
    <body>
        <center>
          //code goes here: bunch of divs and texts
        </center>
    </body>
    </html>

【问题讨论】：

shouldiblamecaching.com
样式表可能被缓存了。尝试将链接更改为“css/index.css?v=1”（在大多数配置下，问号后面的任何内容都将被忽略 - 随便输入任何内容）看看是否是这种情况。
你是在本地加载吗？
For more information about caching...
尝试用ctrl+F5重新加载页面

标签： html css caching web frontend

【解决方案1】：

如果没有简短的运行指南、自述文件或自动化任务的基本列表，回到旧项目可能会导致在运行和测试网站时，会产生一些不需要的副作用。

以下是我之前遇到的一些情况：

浏览器缓存：在 Chrome 中打开 DevTools，然后单击 清空缓存和硬重新加载 (Ctrl+Shift+F5)。如果它没有帮助，给你的 CSS 起一个名字，比如：（more on cache-bursting）： <link href="css/index.css?v=1.0.1" rel="stylesheet" />
框架缓存：如果您使用带有资源缓存的框架，请将其删除/清空。这取决于您使用的框架（如果有）。
CSS Transpiler 不运行：如果您使用某些转译器（SASS、LESS 等），有时会忘记运行转译。
在移动设备上进行测试：他们可以并且经常进行缓存，只是在开发过程中使用缓存爆发。
路径错误/无法访问文件：检查您的 webserver logs 以了解问题所在。
不是真的编辑文件：如果您更喜欢 IDE（例如：IntelliJ IDEA ;)）并且当您编辑特定文件时，保存它，然后上传它（例如：通过 FTP），可能会发生特定文件不会得到更新。 More on this。

【讨论】：

【解决方案2】：

这可能是缓存问题。但是你有没有仔细检查过你的开发者工具，看看 CSS 是否被继承了？有时我会犯错误链接文件的小错误 - 忘记返回文件夹“../css/index.css

【讨论】：