CSS 更改没有得到反映。为什么？ [关闭]答案

【问题标题】：CSS changes are not getting reflected. Why? [closed]CSS 更改没有得到反映。为什么？ [关闭]
【发布时间】：2015-03-29 22:03:56
【问题描述】：

我在我的网站上工作，每当我向我的 CSS 文件添加一些新行时，它就是不想使用我创建的行。

不过，他们应该没事的。

.what-new {
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3 {
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;

仅作为示例。

CSS 文件在某一部分工作，但从某个地方它只是停止使用我的文件。然而，它是在 head > 中链接的。

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

而我的 HTML 代码如下（注意这只是代码的一部分）：

    <div class="what-new">
    <div class="container">
        <h3>What's new</h3>
        <div class="blog-news">
            <div class="blog-news-grid">
                <div class="news-grid-left">
                    <h4>06</h4>
                    <small>of january 2015</small>
    </div>

有人知道解决办法吗？

【问题讨论】：

检查链接的绝对路径：style/css_2-play.css 是否会在浏览器中加载您更改的css。如果没有，那么你的路径是错误的。
嗯，一些 .css 代码实际上是可以工作的。只是新线没有反映在指数上。我会再次检查路径。编辑：路径也可以..：c
当使用相对路径打开 css 文件时，您是否看到文件中反映了您所做的 css 代码更改？
确保您正在编辑的文件与您引用的文件相同。我知道我不小心将我正在处理的文件保存在不同的地方，因此一直在更新“错误”的文件。如果您在网络上进行测试，请尝试清除缓存（按住 Shift 并刷新）。
也许你有其他样式比上面提到的那些具有更高的特异性see here

标签： html css

【解决方案1】：

对于 Chrome，请使用清除缓存扩展。要下载此扩展，请单击此link。

【讨论】：

【解决方案2】：

您可以在开发模式下禁用缓存。例如，对于谷歌浏览器：右键单击->检查->网络->单击禁用缓存然后，您不需要每次都清理缓存。

【讨论】：

【解决方案3】：

这意味着您的CSS 规则未应用，或者您的CSS 文件被缓存。

可能的原因有：

带有higher Specificity 的 CSS 规则正在战胜您希望应用的规则

具有相同特异性的 CSS 规则在您的之后加载
（声明的顺序很重要 - 后者获胜 - 因此请检查您的 CSS 文件导入）

针对您的对象的 CSS 规则使用 !important keyword。

通过浏览器的开发者工具（使用 F12 打开）检查规则是如何应用的。

提示：在 CSS 面板中，规则按重要性降序排列。

您的 CSS 存在语法错误

您的 HTML 格式不正确

使用一些验证器。

您的浏览器正在缓存 CSS 文件

按 CTRLF5 强制刷新浏览器缓存的资源。

提示： This Q&A 探索主题。

您的服务器正在缓存 CSS 文件

通过在地址栏中输入静态资源的 URL 并按 CTRLF5 来强制刷新服务器缓存的资源 那个页面（即 CSS 文件）。

提示：要快速打开 CSS 文件的 URL，请使用浏览器开发工具中的 在新选项卡中打开链接，或单击打开的 HTML 中的 CSS 链接查看源代码。

【讨论】：

ctrl + F5 工作。尽管通过将我的 chrome 缓存设置 (chrome://flags/) 恢复为其默认值，我只需通过简单的刷新就能让它显示更改。非常感谢你，我正在做 compass watch 并看到我的 scss 在终端中被修改，但它没有得到反映，因为 css 正在被缓存......

【解决方案4】：

我面临同样的问题，但我找到了解决方案。在 css_2-play.css 中添加或更改 css 属性后

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

将 CSS 文件名改为 something.css

<link rel="stylesheet" href="style/something.css" type="text/css"/>

不要忘记重命名原始DIRECTORY中的css文件。

【讨论】：

【解决方案5】：

就我而言，错误是我没有在 VS2017 中安装名为 Bundler & Minifier 的软件包。安装后，所有更改为例如。 main.css 也自动更改了 main.min.css 并且 Web 发布采用了实际的 CSS 文件。

【讨论】：

【解决方案6】：

在经历了很多痛苦并完成了这里已经提到的所有形式之后。

我在我的 CPanel 上发现了一个名为 Cachewall 的应用程序，我将其关闭，这解决了我的问题

这可能对某人有帮助

【讨论】：

【解决方案7】：

主要是由于您的浏览器缓存。通过删除历史记录和删除缓存来删除缓存，或者作为上面建议只需按 ctrl+f5 而不是 f5

【讨论】：

【解决方案8】：

如果您的浏览器没有反映附加的 CSS 样式表中所做的更改，请尝试以下操作：

在浏览器窗口中右键单击您的文档。
转到查看页面源代码。
在您的代码中找到您附加的 CSS 文件的链接。转到您的附件 CSS 文件并查看它是否包含您的最新更改。如果不刷新您的 CSS 文件和所有最新更改都会出现。
重新加载您的文档，更改就会出现。 Open the CSS file in your browser.Reload your CSS file in your browser。希望这会有所帮助！

【讨论】：

【解决方案9】：

对于 Django，'clearsessions' 后跟 'runserver' 将刷新 .css 文件中的所有设置。

您还应该清理浏览器的缓存。

【讨论】：

【解决方案10】：

我忘记在 CSS 文件中关闭 {。这就是为什么所有代码都没有显示在页面上的原因。

【讨论】：

上面有人已经提出了这个建议。你应该选择他们的正确而不是你自己的。

【解决方案11】：

您基本上面临一个缓存问题，您的浏览器并不想真正从服务器请求新版本，而是使用缓存在内部浏览器缓存中的版本。

简单地使用开发者工具来禁用缓存在开发过程中是可行的，但如果你的工作流程是基于经常将东西放到网上，你最终将面临这样一种情况，即你不再能够控制访问者看到的 CSS 代码的版本（而你不能指望他们使用他们的开发者工具来禁用缓存）。

为了防止这样的事情发生，您应该使用一种称为“缓存破坏”的技术，这实质上意味着您将向资源 URL 附加内容，每次资源文件更改时这些内容都会更改。本质上是您的 CSS URL 转换

<link rel="stylesheet" href="style/css_2-play.css" type="text/css"/>

这样的事情

<link rel="stylesheet" href="style/css_2-play.css?1422585377" type="text/css"/>

关于 SO 上的缓存破坏有很多报道，因此您可能需要先查看所有可用选项，然后再决定如何处理该问题。

我个人最喜欢的技术是将服务器端代码与mod_rewrite 结合起来实现缓存清除。工作流程如下。

1) 服务器端代码使用DOMDocument 在生成的HTML 代码（如CSS、JavaScript 等）中查找所有资源文件，并附加使用filemtime 检索到的修改时间戳。

示例：/css/main.min.css 在将返回给客户端（浏览器）的代码中变为 /css/main.min-1422585377.css。

2) 当浏览器收到响应时，如果附加的时间戳与缓存中的时间戳不匹配，它只需将该 CSS 请求视为新资源（具有不同名称的资源始终被视为新请求)。

3) 浏览器现在向服务器发送/css/main.min-1422585377.css 的请求。

4) 为了将所有请求重定向到服务器上实际存在的唯一main.min.css，我们使用这样的简单重写规则

RewriteRule (.+)-(\d{10,}).(css|js|jpg|jpeg|png|gif)$ $1.$3 [L]

注意：我实际上更喜欢在文件名中包含时间戳，所以我更喜欢使用/css/main.min.css?1422585377，而不是/css/main-1422585377.min.css，因为像Squid这样的一些代理服务器倾向于忽略查询字符串并且只会处理文件名部分是相关的。

【讨论】：

在 /css/main.min.css 之后添加 ?1 然后 ?2 等等，这对我来说非常有用
好答案，感谢@DragonFire 的评论，很简单，只需在.css 后添加?1、?2、?3

【解决方案12】：

请关闭你启动的 div .what-new h3

CSS 代码：

.what-new{
    padding:2em 0 4em;
    text-align:center;
}
.what-new h3{
    font-size:4em;
    font-weight:700;
    color:#000;
    margin:0.5em 0;
}

【讨论】：

它在我的代码中被关闭了，我没有发布它真是太糟糕了。对不起！

【解决方案13】：

当我在我的 Mac 上的 XAMPP 堆栈上处理我的网站时，这种情况一直发生在我身上。解决方案是激活开发人员选项，并从开发人员菜单中选择“空缓存”。这会强制浏览器刷新页面的 css。其他平台开发不熟悉，看能不能清空浏览器缓存。

另外，检查你的 css 并确保你的语法是正确的，特别是你没有在某处省略“}”。

【讨论】：