Html CSS 更改没有得到反映。为什么？

CSS changes are not getting reflected. Why?

提问by Kian Pasani

I am working on my website and whenever I am adding some new lines to my CSS file, it just doesn't want to use the lines I made.

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

Yet, they should be alright.

不过，他们应该没事。

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

Just as an example.

举个例子。

The CSS file is working at one part, but from somewhere it just stops using my file. Yet, it is linked in the < head>.

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

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

And my HTML code is the following(note that this is just a part of the code):

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

Anyone know a solution for that?

有人知道解决方案吗？

采纳答案by Kian Pasani

I forgot to close a {in the CSS file. That's why all the code didn't show up on the page.

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

回答by Andrea Ligios

This means that your CSS rule is not appliedor that your CSS file is cached.

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

The possible causes are:

可能的原因是：

• a CSS rule with a higher Specificityis winning over the rule you expect to be applied
• a CSS rule with the same Specificity is loaded after your
  (the order of declaration counts - the latter wins - so check your CSS file imports)
• a CSS rule targeting your object uses the !importantkeyword.

• 用CSS规则一个较高的特异性是赢得了规则，你希望被应用
• 在您之后加载具有相同特异性的 CSS 规则
  （声明的顺序计数 - 后者获胜 - 因此请检查您的 CSS 文件导入）
• CSS规则针对你的对象使用的!important关键字。

Inspect how the rules are appliedthrough the browser's Developer Tools (open with F12).

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

HINT:In the CSS panel, the rules are listed by importance in descending order.

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

• your CSS has syntax errors
• your HTML is not well-formed

• 你的 CSS 有语法错误
• 您的 HTML 格式不正确

Use some validator.

使用一些验证器。

• your browser is caching the CSS file

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

Force the refresh of the browser-cached resourceby pressing CTRLF5.

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

HINT:This Q&Aexplores the subject.

提示：此问答将探讨该主题。

• your server is caching the CSS file

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

Force the refresh of the server-cached resourceby entering the URL of the static resources in the Address Bar and pressing CTRLF5on thatpage (that is the CSS file).

强制服务器缓存资源的刷新在地址栏中输入静态资源的URL，然后按CTRLF5在那页（也就是CSS文件）。

HINT:To open the CSS file's URL fastly, use Open link in a new Tabfrom the browser's Developer Tools, or click on the CSS link in the HTML opened with View Source.

提示：要快速打开 CSS 文件的 URL，请Open link in a new Tab从浏览器的开发人员工具中使用，或单击以 .html 打开的 HTML 中的 CSS 链接View Source。

回答by brezanac

You are basically facing a caching issue where your browser doesn't feel like actually requesting the new version from the server and instead uses the one cached in the internal browser cache.

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

Simply using Developer tools to disable cache will work during development but if your workflow is based on putting stuff online frequently you will eventually face a situation where you are not anymore in control which version of your CSS code your visitors see (and you can't count on them using their Developer tools to disable caching).

简单地使用开发者工具禁用缓存在开发过程中是可行的，但如果您的工作流程基于频繁地将内容放在网上，您最终将面临这样一种情况：您无法再控制访问者看到的 CSS 代码版本（而且您不能依靠他们使用他们的开发人员工具禁用缓存）。

In order to prevent stuff like this from happening you should use a technique called "cache busting" which essentially means you will be appending stuff to your resource URLs that will change every time your resource files change. Essentially your CSS URL transform from this

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

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

to something like this

像这样的事情

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

There is a lot of coverage about cache busting on SO so you might want to take a look at all available options before deciding how you want to handle the issue.

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

My personal favorite technique is combining server-side code with mod_rewriteto achieve cache busting. The workflow is as follows.

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

1) Server side code uses DOMDocumentto look up for all resource files in the generated HTML code like CSS, JavaScript etc. and appends a modified timestamp retrieved with filemtime.

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

Example: /css/main.min.cssbecomes /css/main.min-1422585377.cssin the code that will be served back to the client (browser).

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

2) When the browser receives the response it will simply have to treat that CSS request as a new resource if the appended timestamp doesn't match the one in the cache (resource with a different name is always treated as a new request).

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

3) Browser now send a request for /css/main.min-1422585377.cssto the server.

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

4) In order to redirect all requests to the one and only main.min.cssthat actually exists on the server we use a simple rewrite rule like this

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

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

NOTE:I actually prefer to include timestamps in the filename itself so instead of /css/main.min.css?1422585377I prefer to use /css/main-1422585377.min.cssbecause some proxy servers like Squid tend to ignore query strings and will treat only the filename part as relevant.

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

回答by michael kagan

This happens to me all the time when I work on my website on my XAMPP stack on my mac. The solution there is to activate the developer options, and to select "empty cache" from the developers menu. This forces the browser to refresh the css for the page. I am not familiar with developing on other platforms, but see if you can empty the cache in your browser.

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

Also, check your css and make sure that your syntax is correct, in particular that you have not omitted a "}" somewhere.

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

回答by Jenti Dabhi

Please close the div you start .what-new h3

请关闭你开始的 div .what-new h3

CSS CODE:

代码：

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

回答by Shashwat Tiwari

If your browser is not reflecting the changes made in the CSS stylesheets attached, then try the following :

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

1. Right click on your document in the browser window.
2. Go to View Page Source.
3. In your code find the link to your attached CSS file. Go to your attached CSS file and see whether it contains your latest changes. If not refresh your CSS file and all the latest changes will appear.
4. Reload your document and the changes will appear. Open the CSS file in your browser.Reload your CSS file in your browser. Hope this helps!!

1. 在浏览器窗口中右键单击您的文档。
2. 转到查看页面源。
3. 在您的代码中找到您附加的 CSS 文件的链接。转到您附加的 CSS 文件，看看它是否包含您的最新更改。如果不刷新您的 CSS 文件，所有最新的更改都会出现。
4. 重新加载您的文档，更改就会出现。 在浏览器中打开 CSS 文件。在浏览器中重新加载 CSS 文件。希望这可以帮助！！

回答by T.T

For Django, 'clearsessions', followed by 'runserver' will refresh all the setting in .css file.

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

You should also clean the cache of your browser.

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

回答by Daniel Beltrami

After suffering a lot and having done all the forms already mentioned here.

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

I found on my CPanela application called Cachewall, I just turn it off, and this solve my problem

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

This may help someone

这可能会帮助某人

回答by Honza P.

In my case the mistake was, that I did not have installed package in VS2017 with name Bundler & Minifier. After installation, all changes to eg. main.css changed automatically also main.min.css and Web publishing took actual CSS file.

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

回答by navjot singh

I am facing the same problem but I found a solution. after adding or changing the css properties in css_2-play.css

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

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

change the CSS file name into something.css

将 CSS 文件名更改为something.css

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

don't forget to rename the css file in the orignal DIRECTORY.

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

回答by LiXiang

You can disable cache in development mode. For example, for Google Chrome: right click-> inspect->Network-> click on Disable Cache Then, you don't need to clean cache every single time.

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