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

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文件在一个部分工作,但从某个地方它只是停止使用我的文件.然而,它与< 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>

有人知道解决方案吗？

Answer 1

通常原因是以下之一:

1)您的规则未被应用

这可能是因为:

• 您的HTML格式不正确(但通常浏览器处理它);
• 你的CSS有语法错误;
• 在你的(声明计数顺序,后者获胜)之后加载一些其他CSS文件(具有相同/相似的规则);
• 其他一些具有更高特异性的 CSS规则会在页面的任何位置加载,并且胜过您想要应用的规则(有关此答案的更多信息) ;
• 一些其他CSS规则使用!important关键字.

您可以使用浏览器的开发人员工具进行检查, 检查CSS面板,按重要性降序列出规则的位置(从更多到不太重要).

2)您的CSS文件被缓存

这可能是因为您的服务器或浏览器正在缓存CSS资源.要强制刷新资源,您需要按一次CTRLF5而不是F5单独按下(在重新部署静态资源之后).

关于这个主题有一个众所周知的SO Q&A,并且明确指出:

• CTRLF5(不是吗？)在不同浏览器中的工作方式不同 ;
• 请注意,虽然Ctrl + F5将导致浏览器抛出缓存并从服务器请求新缓存,但服务器可能会忽略no-cache标头并提供服务器端缓存页面.因此,如果服务器忽略no-cache标头,甚至Ctrl + F5也可能返回旧版本的页面.(从评论到接受的答案).

如果服务器忽略浏览器的请求清除缓存(有时会发生),我发现解决这个问题的最快方法是:在地址输入栏的静态资源和新闻界的URL CTRLF5上那页(也就是CSS文件),而不是在导入它的页面中.这种情况100%有效.

要快速执行此操作,请使用Open link in a new Tab浏览器的DevTools,或者通过打开的HTML单击CSS链接View Source.

Answer 2

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

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

Answer 3

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

简单地使用开发人员工具来禁用缓存在开发过程中会起作用,但如果您的工作流程基于经常在线放置内容,那么您最终将面临一种情况:您无法控制访问者看到的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这样的代理服务器倾向于忽略查询字符串,并且只将文件名部分视为相关.

Answer 4

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

代码：

.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 样式表中所做的更改，请尝试以下操作：

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

Answer 6

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