Question

我在我的网站上工作，每当我在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文件正在一个部分工作，但从某个地方它只是停止使用我的文件。然而，它与＆lt; 头＆gt;。

<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>

任何人都知道解决方案吗？

Answer 1

通常原因是以下之一：

1）您的规则未被应用

这可能是因为：

您的HTML格式不正确（但通常浏览器会处理它）;
你的CSS有语法错误;
一些其他CSS文件（具有相同/类似规则）在您（声明的顺序计数，后者获胜）之后加载;
其他一些CSS规则with an higher Specificity会在页面的任何位置加载，并且会赢得您要应用的规则(More informations on this answer);
其他一些CSS规则make use of the !important keyword。

您可以使用浏览器的开发人员工具检查，检查CSS面板，按重要性降序列出规则（从更多到不太重要））。

2）您的CSS文件已缓存

这可能是因为您的服务器或浏览器正在缓存CSS资源。要强制刷新资源，您需要单独按 CTRL F5 而不是 F5 一次（在重新部署静态之后）资源）。

有a well-known SO Q&A on this subject，并明确指出：

CTRLF5 does (did ?) work differently across different browsers;

请注意，虽然Ctrl + F5会导致浏览器丢弃缓存并从服务器请求新缓存，但服务器可能会忽略   no-cache标头并提供服务器端缓存页面。因此即使是Ctrl + F5   如果服务器忽略该页面，则可能返回旧版本的页面   无缓存标头。（从评论到the accepted answer）。

如果服务器忽略浏览器清除缓存的请求（有时会发生），我发现处理此问题的最快方法是：在地址栏中输入静态资源的URL并按 CTRL F5 在那个页面（即CSS文件）上，而不是在导入它的页面中。这种方法有100％的时间。

要快速执行此操作，请使用从浏览器的DevTools中的新选项卡中打开链接，或者使用查看源打开的HTML单击CSS链接。

Answer 2

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

只需使用开发人员工具来禁用缓存即可在开发期间工作，但如果您的工作流程基于经常在线投放内容，您最终将面临一种情况：您无法控制访问者看到的CSS代码版本（以及您无法使用他们的开发人员工具来禁用缓存。

为了防止这样的事情发生，你应该使用一种称为＆＃34;缓存破坏的技术＆＃34;这实际上意味着您将向资源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这样的代理服务器会忽略查询字符串并且只将文件名部分视为相关部分。

Answer 3

当我在我的Mac上的XAMPP堆栈上的网站上工作时，这种情况一直发生在我身上。解决方案是激活开发人员选项，并选择＆＃34;清空缓存＆＃34;来自开发者菜单。这会强制浏览器刷新页面的CSS。我不熟悉在其他平台上开发，但看看你是否可以在浏览器中清空缓存。

另外，请检查您的CSS并确保您的语法正确，特别是您没有省略＆＃34;}＆＃34;某处。

Answer 4

请关闭你开始的div。新的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;
}

Answer 5

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

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

Answer 6

对于Django，＆＃39; clearsessions＆＃39;，然后是＆＃39; runserver＆＃39;将刷新.css文件中的所有设置。

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

实际上，浏览器从浏览器缓存中获取旧的css文件。你必须刷新缓存然后尝试。我也是同样的问题...

Answer 11

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

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

这可能有助于某人

Answer 12

在我的情况下，错误是，我没有在VS2017中安装包名为Bundler＆amp; Minifier。安装后，所有更改，例如。 main.css也自动更改，main.min.css和Web发布都采用了实际的CSS文件。

Answer 13

我遇到了同样的问题，但是找到了解决方案。在 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"/>

别忘了在原始的目录中重命名css文件。

Answer 14

在Crhome中使用“ 新的隐身窗口” Ctrl + Shift + N

CSS变化没有得到反映。为什么？

14 个答案:

1）您的规则未被应用

2）您的CSS文件已缓存